在手机和平​​板电脑上滚动不同的元素（div style =“overflow-y：auto”）

Question

=]

这就是事情：

我们正在开发一个使用HTML5 / CSS3 / JavaScript / jQuery技术的Web应用程序。当我在台式电脑的浏览器中测试它时，一切都很酷并且功能齐全。那不是问题。 =]

但是......这就是我目前陷入困境的问题......

当我尝试在手机（或平板电脑）上测试时，div不想滚动。我知道手机（和平板电脑）以不同的方式处理事件，他们（有时，有时）会有不同的事件

我们没有太多时间来解决这个问题（像往常一样-_-），但我们仍然必须提出解决方案。我们不想为NOT dekstop硬件创建另一个UI，因此我正在寻找一种解决方案，可以通过将基本事件“链接”移动事件处理程序来触发。

我们正在使用需要在移动（以及平板电脑）设备上滚动的div和CSS属性overflow-x，overflow-y。你会推荐什么？你会怎么做？哪个是完美且省时的方法？

提前感谢您的回答！ =]

最适合每个人， 本

Answer 1

感谢帮助人员，但我已经找到了这样做的方法。 =）我要和你分享，所以你会知道的。

首先，Android 3.x平板电脑确实有滚动div。

但要使其适用于2.2和ipad：Here's the code I've been using (click on me!)

所以你只需要传递你想要滚动的div的id，用于touchScroll（）方法（包括在你的html头上的corse之后）etvoilá！ =）

我还使用另一个接受元素的函数扩展了代码（复制＆gt;粘贴代码）：

function touchScrollElement(element){
    if(isTouchDevice()){
        var scrollStartPosY=0;
        var scrollStartPosX=0;

        element.addEventListener("touchstart", function(event) {
            scrollStartPosY=this.scrollTop+event.touches[0].pageY;
            scrollStartPosX=this.scrollLeft+event.touches[0].pageX;
        },false);

        element.addEventListener("touchmove", function(event) {
            if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
                this.scrollTop+event.touches[0].pageY < scrollStartPosY-5) ||
            (this.scrollTop != 0 && this.scrollTop+event.touches[0].pageY > scrollStartPosY+5))
                event.preventDefault();
            if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
                this.scrollLeft+event.touches[0].pageX < scrollStartPosX-5) ||
            (this.scrollLeft != 0 && this.scrollLeft+event.touches[0].pageX > scrollStartPosX+5))
                event.preventDefault();
            this.scrollTop=scrollStartPosY-event.touches[0].pageY;
            this.scrollLeft=scrollStartPosX-event.touches[0].pageX;
        },false);
    }
}

这就是'当前的解决方案...... =）

Answer 2

iOS 5支持溢出：滚动和溢出：自动。您只需添加此CSS规则，滚动应该可以工作：

-webkit-overflow-scrolling: touch;

Answer 3

  

当我尝试在手机（或平板电脑）上测试时，div不想滚动。

为了让它们滚动，你在尝试什么？如果您尝试从代码中滚动它们，我们需要查看代码。

（另一方面，如果你试图让它们通过用户交互滚动，在iOS上你可以用两个手指而不是一个手指滚动页面上的各个可滚动元素。）

Answer 4

overflow: scroll的移动实施非常糟糕......

您可以在iOS设备上使用两根手指，但用户通常不知道这一点，而且Honeycomb之前的Android操作系统没有overflow: scroll的任何实现，只是像{{1}一样剪辑溢出}。甚至Honeycomb实施也显然不稳定，并且用户体验不佳。

您可以使用一些预制的基于JavaScript的软件包中的一个尝试实现跨平台滚动，但它们通常无法达到“出色的用户体验”。

jQuery Mobile has an experiement called "Scrollview"和iScroll is one that comes to mind。

- 编辑 -

我刚刚遇到一个名为Wink的JavaScript库，它有一个很好的可滚动区域插件。 Check-out Wink Toolkit