javascript - 在手机和平​​板电脑上滚动不同的元素(div 样式 ="overflow-y: auto")

Question

=]

事情是这样的:

我们正在使用 HTML5/CSS3/JavaScript/jQuery 技术开发网络应用程序。当我在桌面 PC 的浏览器中对其进行测试时，一切都很酷并且功能齐全。那不是问题。 =]

但是...这是我目前遇到的问题...

当我试图在手机(或平板电脑)上测试它时，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!)

因此，您只需为 touchScroll() 方法传递要滚动的 div 的 ID(在 corse 之后，包括在您的 html 的头部)等等! =)

我还用另一个接受元素的函数扩展了代码(复制 > 粘贴代码):

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);
    }
}

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