Android/PhoneGap中的overflow-y會產生奇怪的行爲

我有一個使用PhoneGap開發的HTML5/jQuery Mobile應用程序。我已經成功地將此應用程序部署到了iOS，並且現在將其移植到Android。Android/PhoneGap中的overflow-y會產生奇怪的行爲

在我的Android設備上測試這款應用時，我遇到了一些奇怪的行爲，這是一款運行冰淇淋三明治的三星Galaxy S2。

我有一個div中包含的元素列表，該div具有固定的高度。它還使用CSS屬性overflow-y：scroll來允許移動用戶滾動瀏覽列表。該列表包含錨鏈接。就像這樣：

<div style="display: block; width: 320px; height: 250px; overflow-y: scroll;"> 
    <a href="index1.html">Link 1</a> 
    <a href="index2.html">Link 2</a> 
    <a href="index3.html">Link 3</a> 
    <a href="index4.html">Link 4</a> 
</div>

當錨鏈接的列表是仍然盒子標準高度範圍內（即，如果該列表只有少數幾個元素），它工作正常。您可以點擊鏈接，並按預期工作。但是，當鏈接的列表擴展超出框的高度並且溢出-y滾動生效時，我無法再點擊鏈接。滾動完美，但我無法點擊滾動div內的任何元素！

奇怪的是，我無法做的任何其他鏈接都是使用瀏覽器的文本選擇功能來選擇它們。當滾動鏈接太少時可能會出現這種情況，但在滾動處於活動狀態時不可能。

我曾經假設一個帶有ICS的Galaxy S2足夠新，足以支持溢出-y滾動，但也許我錯了。任何想法，我如何才能得到這個工作？我似乎無法在網上找到關於錯誤或支持在冰淇淋三明治溢出的任何具體內容。

來源

2012-11-30 Brandon Tooke

您可以直接附加輕敲事件處理程序到這些鏈接嗎？使用jQuery Mobile鏈接並不像看起來那麼簡單。

既然您是從iOS開始的，那裏是否還有iOS特有的css？爲了在iOS上獲得漂亮的滾動效果，你有時必須添加一個3d轉換來觸發硬件加速，但是這會對android有一些有趣的副作用。

可能值得嘗試的另一件事是設置overflow而不是overflow-y - 它不應該是不同的，但有時它是。

來源

2012-12-03 04:14:29

我知道這是一個老問題，但我認爲解決的辦法可能是有益的，因爲它仍與當前版本的PhoneGap /科爾多瓦的發生：

要解決這個問題，你必須增加一個轉換屬性的固定元素，你的情況主要DIV：

div { 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0, 0, 0); 
}

現金here

來源

2015-07-10 11:10:12 andresigualada

Android/PhoneGap中的overflow-y會產生奇怪的行爲

回答

相關問題