Question

我正在开发一个网络应用程序。左侧是使用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()})
});

Answer 1

Make page not scrollable

这样的东西？

我认为使用$（文档）会更好！

参考：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
});

Answer 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>

我想你应该修复你从右向左滑动所面临的问题。

仅防止水平滚动移动应用程序

2 个答案: