Prevent only horizontal scrolling mobile app

Question

I'm developing an web app. On the left side is an sidebar using the Sidr-plugin (jQuery Plugin: Sidr). The test site is on my developing server. My problem is that if I'm swipe from left-to-right the sidebar is displayed. That's very good. But if I want to close the sidebar by swiping from right-to-left I must prevent the scrolling by add this following code:

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

I did that, but now: My navigation in the top of the page (menu) doesn't work fine. I can't scroll until to the end.

So my question is: How can I change this. It should only prevent the vertical Scrolling if I'm going to close the Sidebar on the left.

Here's my complete 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()})
});

score 0 · Accepted Answer · edited May 23 '17 at 12:29

0

Make page not scrollable

Something like this?

I think that using $(document) would be better!

Reference: 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
});

edited May 23 '17 at 12:29

Community

1
1

answered May 12 '13 at 18:25

Niccolò Campolungo

11,824
4
32
39

The first link is actually the right way. But this prevent horizontal scrolling too. By this way I can't scroll the navigation (menu link in the black top toolbar) too. – Jan Andrè Schlösser May 12 '13 at 18:43
Maybe something like this? Not tested. var lastY; $(document).bind('touchmove', function (e){ var currentY = e.touches[0].clientY; if (currentY === lastY){ // moved horizontally return; } lastY = currentY; }); – Niccolò Campolungo May 12 '13 at 19:00
Maybe you don't understand my problem. I'm going to describe it better: – Jan Andrè Schlösser May 12 '13 at 19:09
When you visit [http://jan-schloesser.noip.me/phpfundamentals/gallery/](http://jan-schloesser.noip.me/phpfundamentals/gallery/) with an mobile device and you swipe from left-to-right the sidebar is displayed. If I delete this `$('body').bind('touchmove', function(e){e.preventDefault()})` line, I can close the sidebar by swiping from right-to-left. But the left part of the site (the content) is scrolling vertically. Like this: http://jan-schloesser.noip.me/phpfundamentals/gallery/ . I want to prevent the vertical scrolling but not the horizontal scrolling, so that I can use the menu completely. – Jan Andrè Schlösser May 12 '13 at 19:18
Just a sec. So you want your code allowing the user(in this case, you) to scroll ONLY horizontally? (so left-to-right to open menu and right-to-left to close it?) – Niccolò Campolungo May 12 '13 at 19:40
Yip, that's true. What's better than preventing the vertical scrolling completely, is only prevent it on closing the sidebar. But whether or not that will be possible. – Jan Andrè Schlösser May 12 '13 at 19:46
Sorry, in your title is written "prevent horizontal scrolling" so I thought you wanted to prevent horizontal scrolling lol I updated the code, it's the same exact thing but now it prevents the vertical scrolling – Niccolò Campolungo May 12 '13 at 19:55
Thank you for the answer. But I think you don't understand the problem. See this screen: http://img15.imageshack.us/img15/661/fotooy.png & http://img41.imageshack.us/img41/2998/fotokf.png The second image shows an vertical scrollbar and in the left side of the page (the content) you can scroll. This should be prevented like in the first screenshot. But when I prevent it by `$('body').bind('touchmove', function(e){e.preventDefault()})` I can't scroll horizontally in the navigation. The scrolling should only prevent when closing the sidebar by swiping right-to-left. – Jan Andrè Schlösser May 12 '13 at 20:08

score 0 · Answer 2 · answered Apr 17 '15 at 19:08

I was trying to integrate Sidr with Hammer JS but there is conflict, so I got rid of Hammer and used the code below, which uses TouchWipe JS combined with 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>

I guess the problem you are facing with right-to-left swipe should be fixed.

Prevent only horizontal scrolling mobile app

2 Answers2

Linked