Android上的溢出滾動不起作用？

Question

yupp，我是其中一個想要用HTML5開發移動應用程序的人。 在Android和iOS上。 聽起來很瘋狂我知道。 可悲的是我有問題......

我有一個經典的應用程序，頁腳和標題以及應該可滾動的內容。 在iOS上這太棒了！ 頁眉和頁腳的“位置：固定”到頂部/底部，內容使用原生滾動動量“-webkit-overflow-scrolling：touch;”。 我知道“-webkit-overflow-scrolling：touch;” 在Android上不可用，但此屬性不僅被忽略，滾動根本不起作用！

所以，任何人都可以告訴我如何在iOS上進行“原生”滾動，並在Android上使用相同的標記和樣式進行“良好”滾動操作？ 例如，如果我可以使用具有動量的原生滾動 - 很棒，如果不是 - 純滾動。

注意：我現在只需要支持最新版本（沒有Android 2.3！），所以我不想要像iScroll 4這樣的JS-Fallback。

.content {
    // no(!) scrolling on Android - why?
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

JSFiddle： http ： //jsfiddle.net/bmJxN/

謝謝！

Answer 1

很抱歉挖了一個舊帖子，但因為似乎沒有令人滿意的答案，我想我會為像我這樣在這里結束的任何人添加我的2cents。

談到移動WebApps中滾動的一般問題，移動瀏覽器上的滾動和動量很痛苦，因為根據平台有各種不同的實現：Android瀏覽器！= Chrome！= Safari！= opera等，以及Android < 3不支持滾動以及更新的版本，就像iOS <5一樣。

情況很復雜，對於大多數設備都在iOS 5或6上的iOS來說可能是一個問題，但這是Android碎片的真正問題。

為了更好地掌握這一點，你可以讀到這個 。

為了回應這個問題，正如您已經指出的那樣，有諸如iScroll之類的后備或者最近，Overthrow，您可以更好地處理本機實現和JS回退。 最近，英國“金融時報”團隊發布了看起來很有前景的FTScroller庫。

現在針對您的情況，如果您只想支持Android 4+和iOS5 +，您應該能夠使用固定定位和

overflow: auto;
-webkit-overflow-scrolling: touch;

在您的可滾動內容上（如果使用auto屬性，則不需要指定“overflow-x：hidden”）。 如果沒有，你可能在你的固定位置或其他一些css布局屬性中犯了錯誤？ （繼承了身體道具等）。

更新：我應該在發布我的答案之前完成此操作，但我剛剛測試了我的Nexus4上的小提琴並且您的代碼在Chrome中運行：這可能意味着您在沒有安裝Android 4+的舊設備或沒有安裝的瀏覽器上進行了測試支持溢出屬性？

附注：

• 請注意，雖然在Android和iOS上默認情況下動量效果是活動的，但它將是應用的平台特定動量：它們彼此不同，這與使得滾動動量平台無關的JS polyfill相反。 此外，在iOS上，滾動比Android更平滑，即使新設備和Android 4.0+的情況變得更好（在此之前，在大多數人口密集的視圖中都很難用）。
• 在iOS上，您將擁有本機平台的彈跳效果，但不會在Android上，因為本機瀏覽器UX不包含此彈跳效果（這很奇怪，因為此效果存在於OS UX的其他部分，例如設置）。 您可以在Android上使用庫來實現這一點，但要注意不可思議的山谷。
• 即使在較新的瀏覽器上也存在其他問題，例如Android瀏覽器中沒有滾動位置指示器，如下所示： http ： //barrow.io/overflow-scrolling 。 在iOS上，如果在“ 如何在iOS網絡應用程序中禁用橡皮筋？ ”中指出，在整個頁面上滾動特定元素時，您可能會遇到臭名昭着的“橡皮筋滾動效果”問題。 對於WP8 webApps，您將擁有類似的pb。

所有這些都說滾動簡單的東西在移動WebApps中遠非完美，而且在WebViews性能方面更糟糕（例如在開發PhoneGap應用程序時）。 祝好運 ！

Answer 2

由於其他地方似乎沒有正確解釋的行為，因此在此處添加其他注釋。

當使用'溢出：自動'或'溢出：滾動'時，Chrome for Android將僅在頁面加載時暫時顯示滾動條指示符，然后再隱藏它們（與桌面瀏覽器的典型行為不同）。 復雜的是，這些指標非常薄且半透明，很容易被遺漏。

這可能不是一般頁面滾動的問題; 但是，當用於滾動頁面區域（例如整頁應用程序）時，丟失滾動條以指示其他內容會產生嚴重的UX問題。

要解決此問題，您可以添加自定義滾動條。 使用'overflow：auto'時，只有當內容超出可見區域時才會顯示這些滾動條（就像在桌面瀏覽器上一樣）。

將以下代碼添加到CSS：

::-webkit-scrollbar-track {
  background-color: #F5F5F5;
}

::-webkit-scrollbar {
  width: 12px;
  background-color: rgba(0,0,0,0);
}

::-webkit-scrollbar:hover {
  background-color: rgba(0, 0, 0, 0.09);
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid #F5F5F5;
  -webkit-border-radius: 100px;
}

::-webkit-scrollbar-thumb:active {
  background: rgba(0,0,0,0.61);
  -webkit-border-radius: 100px;
}

您還可以使用下面的代碼添加垂直箭頭。 類似地，可以通過垂直交換水平來包括水平箭頭。

::-webkit-scrollbar-button {
  width: 12px;
  height: 12px;
  background-color: #F5F5F5;
  background-size: 100%;
}

::-webkit-scrollbar-button:vertical:increment {
  background-image: url('../images/arrows/arrow-down.png');
}

::-webkit-scrollbar-button:vertical:decrement {
  background-image: url('../images/arrows/arrow-up.png');
}

請注意，最后兩行需要存在箭頭圖像，但無法將這些添加到帖子中（可能是由於它們的小尺寸）。

其他滾動條屬性也可以自定義。 以下指南提供了詳細說明：

http://poselab.com/en/custom-scrollbars-in-webkit/

Answer 3

現在它會起作用，原因很多。 您可以做的是使用任何第三方庫來完成此任務。 我使用了github的一個開源庫來獲得結果： - 庫就在這里

希望它會有用......