僅阻止水平滾動移動應用

Question

我正在開發一個Web應用程序。 左側是使用Sidr插件（ jQuery插件：Sidr ）的側邊欄。 測試站點在我正在開發的服務器上 。 我的問題是，如果我從左向右滑動，則會顯示側邊欄。 這是非常好的。 但是，如果我想通過從右向左滑動來關閉側邊欄，則必須通過添加以下代碼來防止滾動：

$('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

使頁面不可滾動

像這樣嗎

我認為使用$（document）會更好！

參考： 防止在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>

我想應該解決從右向左滑動時遇到的問題。