iPhone上的可滚动div,无需使用两个手指?

我找到了一个为此实现了可重用解决方案的人,该解决方案具有页眉和页脚:

http://cubiq.org/iscroll-4

Open this link on your iPhone device or simulator

index.html文件在正文下方有三个div元素,分别是“header”、“container”和“footer”,所有工作都在fixed.js文件中完成。通过取消“触摸移动”事件的正常操作,文档已固定到位:

    // Disable flick events
    disableScrollOnBody : function() {
        document.body.addEventListener("touchmove", function(e) {
            e.preventDefault();
        }, false);
    },

然后,为“容器”下的“内容”div附加的“触摸开始”、“触摸移动”和“触摸结束”事件创建事件监听器需要做很多工作。逻辑归结为简单地上下移动“内容”div。

这个解决方案是100%HTML/CSS/JavaScript,但是有一些WebKit专有的CSS和JavaScript可能会限制可移植性。在另一台移动设备上工作可能需要一些调整,但这将是一个很好的概念证明。

Fixed positioning in Mobile Safari

可能很笨重,但当用户滚动时,您可以将页眉和页脚重新定位在div的顶部。这样,你的主div就不需要是可滚动的。不过,使用框架(仍然)对任何事情都没有帮助。

对于CSS,请参考 Safari CSS Reference 可能有你要找的东西。您将对以“-webkit”或“-khtml”开头的任何内容特别感兴趣,因为这些是仅在webkit中可用的扩展属性,如3D和touch。也应该适用于Android。

使用JavaScript Introduction to WebKit DOM Programming Topics WebKit DOM API Reference the light-table demo 关于如何处理你的触摸,我想通过复制粘贴javascript来解决这个问题。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<div style="overflow: scroll">