Question

我开发了一个ajax网站，它有一个固定的页眉和页脚，中间有一个可滚动的div，包含应用程序的内容。该网站也适用于移动设备（iPad，Android等），除了当用户到达中间可滚动div的底部时，弹性滚动进入游戏并且页面底部拉开屏幕下方。当它们到达可滚动div的顶部时相同。

我知道你可以通过以下方式完全阻止弹性滚动：

$('#Platform').bind('touchmove', function (e) {    
   e.preventDefault();    
});

但这显然会阻止任何滚动，然后用户无法看到应用程序的内容。我的想法是在上面的事件中加入一些条件逻辑，以便只有当用户位于div的顶部并且他们试图向上滚动或者它们位于底部时才调用e.preventDefault（）。 div他们正试图向下滚动。我开始做这样的事情：

$('#Platform').bind('touchmove', function (e) {
    var platform = $('#Platform');
    if ((platform.scrollTop() + platform.innerHeight()) >= platform[0].scrollHeight) {
        e.preventDefault();
    }
});

上面的代码基本上确定它们是否位于可滚动div的底部，如果是，则调用e.preventDefault（）。这很棒但是一旦它们达到div的底部，它们将永远无法再次滚动！我想我必须以某种方式确定用户刷卡的方式并将其包含在我的逻辑中。如果它们位于底部并向下滑动，请勿滚动。但如果它们位于底部并向上滑动，则允许它们滚动。当他们处于div的顶端时，反之亦然。

这是实现目标的最佳方式吗？有没有更好的办法？如果这是我应该做的，如何确定滑动的方向？

此外，是否有更简单的方法来测试iPad，iPhone，Android设备上的网站，而不是将其部署到开发服务器？我会更多地使用我提出的解决方案，除了我无论如何都没有轻易调试我的代码。

感谢。

Answer 1

http://cubiq.org/iscroll-4非常适合您的使用。如果您有Mac，则可以轻松调试程序，然后只需使用下载xCode / iPhone SDK时获得的iPhone / iPad模拟器。

移动网站阻止弹性页面滚动

1 个答案: