/ /モバイルアプリの水平スクロールのみを禁止-javascript、jquery、ios、mobile、hammer.js

水平スクロールモバイルアプリ(javascript、jquery、ios、mobile、hammer.js)のみを禁止する

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()})
});

回答:

回答№1は0

ページをスクロールできないようにする

このようなもの?

$(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
});

回答№2の場合は0

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>

あなたが右から左へのスワイプで直面している問題は修正されるべきだと思います。