css - 在 Android 浏览器中创建垂直滚动的 div 的最简单方法是什么？

Question

注意:我知道有人问过非常相似的问题，但移动网络还很年轻且多变，而且这些讨论已经有几年时间了，很可能已经过时了。

我正在尝试创建一个简单的滚动 <div>在 Android 浏览器中 - 通过给它一个固定大小和 overflow-y: auto 可以完成什么在兼容的浏览器中。不幸的是，移动 Webkit 浏览器似乎不支持该属性。我还能如何创建此功能或类似功能？

如果可能，我更喜欢 CSS 解决方案。我看过 JavaScript 小部件 iScroll和 Dojo Mobile lists但对于我正在尝试做的事情来说，这些似乎有点矫枉过正。 iScroll 页面提到“最新的 Android 修订版支持此功能(虽然支持不是最佳的)”所以我想知道 Android 4.0 是否已经解决了这个问题。

Answer 1

我已经使用标准触摸事件在很多不同的设备上取得了良好的效果。如果它只是一个简单的解决方案，而不是一个重量级的插件，只需使用 touchstart touchmove 和 touchend 事件顶部计算移动并修改 scrollTop。

我找不到跨设备的标准 CSS 方式，但也许 webkit 有一些专有的东西。

P.S 这是最近 3 个月的事情。

[更新]

您可以像使用任何其他事件一样使用这些事件，

var startX = 0;
var startY = 0;
var ele = document.getElementById('myScrollableDiv');
ele.addEventListener('touchstart', function(ev){
    startX = ev.screenX;
    startY = ev.screenY;
});

ele.document.getElementById('myScrollableDiv').addEventListener('touchmove', function(ev){
    movementX = startX - ev.screenX;
    movementY = startY - ev.screenY;
    ele.style.scrollLeft = ele.style.scrollLeft + movementX;
    ele.style.scrollTop = ele.style.scrollTop + movementY;
    ev.preventDefault();
});

这完全是内存中的，所以它需要一些我当时无法做的测试，而且我也没有我当时使用的代码(尽管那是在 jQuery 中)。这种方法最终确实很有效，只有几件事需要解决。希望这足以让您继续工作。