注意:我知道有人问过非常相似的问题,但移动网络还很年轻且多变,而且这些讨论已经有几年时间了,很可能已经过时了。
我正在尝试创建一个简单的滚动 <div>
在 Android 浏览器中 - 通过给它一个固定大小和 overflow-y: auto
可以完成什么在兼容的浏览器中。不幸的是,移动 Webkit 浏览器似乎不支持该属性。我还能如何创建此功能或类似功能?
如果可能,我更喜欢 CSS 解决方案。我看过 JavaScript 小部件 iScroll和 Dojo Mobile lists但对于我正在尝试做的事情来说,这些似乎有点矫枉过正。 iScroll 页面提到“最新的 Android 修订版支持此功能(虽然支持不是最佳的)”所以我想知道 Android 4.0 是否已经解决了这个问题。
最佳答案
我已经使用标准触摸事件在很多不同的设备上取得了良好的效果。如果它只是一个简单的解决方案,而不是一个重量级的插件,只需使用 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 中)。这种方法最终确实很有效,只有几件事需要解决。希望这足以让您继续工作。
关于css - 在 Android 浏览器中创建垂直滚动的 div 的最简单方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10031416/