Android瀏覽器bug？ div溢出滾動

Question

你可以在Android瀏覽器中使div的溢出內容可滾動嗎？

它可以在所有其他現代瀏覽器中滾動。

在iOS中它是可滾動的 - 但它不顯示滾動條 - 但它可以通過拖動滾動。

一個簡單的例子： http ： //jsfiddle.net/KPuW5/1/embedded/result/

這會很快修好嗎？

Answer 1

Android 3.0及更高版本支持overflow:scroll ，在<3.0這是另一個故事。 你可能在像iScroll這樣的polyfill上取得了一些成功，但這確實需要付出代價。 在具有復雜布局的網站上實施很困難，並且每當網站上的內容發生變化時，您都需要調用方法。 內存使用也是一個問題：在已經動力不足的設備上，由於這些類型的polyfill，性能可能會滯后。

我建議采用不同的方法：使用Modernizr檢測對溢出滾動的支持，在html標記中添加一個類，並使用它來重寫CSS，使頁面“正常”滾動而不是在框中滾動。

/* For browsers that support overflow scrolling */
#div {
    height: 400px;
    overflow: auto;
}

/* And for browsers that don't */
html.no-overflowscrolling #div {
    height: auto;
}

Answer 2

overflow: scroll; 從Android 3（API 11）開始支持。

對於跨平台（即iOS <= 4.3.2）， Cubiq iScroll是一個易於實現的修復程序。

Answer 3

您可以嘗試touchscoll.js用於可滾動的div元素

Answer 4

只是為了完整性：

滾動條實際上​​存在於Android 2.3中，但它們非常多，並且默認情況下它們的樣式為0寬度，因此它們是不可見的。

你可以通過添加樣式來使它們可見：

::-webkit-scrollbar {
    width: 30px;
}
::-webkit-scrollbar-track {
    background-color: $lightestgrey;
}
::-webkit-scrollbar-thumb {
    background-color: $lightgrey;
}

但是，拇指元素不可拖動，您只能通過點擊其下方或上方的軌道來移動它。

此外，這些樣式將改變所有webkit瀏覽器中滾動條的外觀，因此最好添加一個僅適用於Android 2.3的類。

Answer 5

您可以通過在CSS中定義滾動條的樣式，在Android中滾動DIV。 本文將向您展示如何執行此操作： http ： //css-tricks.com/custom-scrollbars-in-webkit/