0

注意：我意识到有人提出了非常相似的问题，但是移动网络还很年轻且不稳定，而且这些讨论已经有几年的历史可能已经过时了。

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

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

4

1 回答 1

1

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

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

PS这是最近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 中）。这种方法最终效果很好，只是需要解决一些问题。希望这足以让您开始工作。

于 2012-04-05T15:26:04.783 回答