仅阻止水平滚动的移动应用程序答案

【问题标题】：Prevent only horizontal scrolling mobile app仅阻止水平滚动的移动应用程序
【发布时间】：2013-05-12 18:19:32
【问题描述】：

我正在开发一个网络应用程序。左侧是使用 Sidr 插件 (jQuery Plugin: Sidr) 的侧边栏。测试站点在我的developing server。我的问题是，如果我从左向右滑动，则会显示侧边栏。这是非常好的。但是，如果我想通过从右向左滑动来关闭侧边栏，我必须通过添加以下代码来防止滚动：

$('body').bind('touchmove', function(e){e.preventDefault()})

我这样做了，但现在：我在页面顶部（菜单）的导航无法正常工作。我不能滚动到最后。

所以我的问题是：我该如何改变这一点。如果我要关闭左侧的侧边栏，它应该只防止垂直滚动。

这是我完整的 JavaScript：

$(function(){
    $(document).foundation();
    $('#sidebar-toggle').sidr();

    var hammertime = Hammer(document.getElementById("wrapper")).on("swiperight", function(event) {
        $.sidr('open');
    });

    var hammertime = Hammer(document.getElementById("wrapper")).on("swipeleft", function(event) {
        $.sidr('close');
    });

    var hammertime = Hammer(document.getElementById("content")).on("tap", function(event) {
        $.sidr('close');
    });

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

【问题讨论】：

标签： javascript jquery ios mobile hammer.js

【解决方案1】：

Make page not scrollable

这样的？

我认为使用 $(document) 会更好！

参考：Prevent horizontal scroll on jQuery Mobile

var lastY;
$(document).bind('touchmove', function (e){
    var currentY = e.touches[0].clientY;
    if (currentY !== lastY){
        // moved vertically
        return;
    }
    lastY = currentY;
    //insert code if you want to execute something when an horizontal touchmove is made
});

【讨论】：

第一个链接其实是对的。但这也可以防止水平滚动。通过这种方式，我也无法滚动导航（黑色顶部工具栏中的菜单链接）。
可能是这样的？未测试。变量最后一个； $(document).bind('touchmove', function (e){ var currentY = e.touches[0].clientY; if (currentY === lastY){ // 水平移动 return; } lastY = currentY; }) ;
也许你不明白我的问题。我会更好地描述它：
当您使用移动设备访问http://jan-schloesser.noip.me/phpfundamentals/gallery/ 并从左向右滑动时，会显示侧边栏。如果我删除这条$('body').bind('touchmove', function(e){e.preventDefault()}) 行，我可以通过从右向左滑动来关闭侧边栏。但是网站的左边部分（内容）是垂直滚动的。像这样：jan-schloesser.noip.me/phpfundamentals/gallery。我想阻止垂直滚动而不是水平滚动，这样我就可以完全使用菜单了。
等一下。所以你希望你的代码允许用户（在这种情况下，你）只水平滚动？（所以从左到右打开菜单，从右到左关闭它？）

【解决方案2】：

我试图将 Sidr 与 Hammer JS 集成但存在冲突，所以我摆脱了 Hammer 并使用下面的代码，它使用了 TouchWipe JS 和 Sidr JS。

<!-- Swipe to open or close mobile menu -->

<script>

      jQuery(window).touchwipe({
        wipeLeft: function() {
          // Close
          jQuery.sidr('close', 'sidr-main');
        },
        wipeRight: function() {
          // Open
          jQuery.sidr('open', 'sidr-main');
        },
        preventDefaultEvents: false
      });

</script>

我猜你应该解决从右向左滑动的问题。

【讨论】：