jQuery mobile disable vertical scroll after transition

Question

I have a Problem concerning scrolling in jQuery mobile. I am trying to get a vertical navigation bar on the left side which can be expanded or collapsed via a button in the header of my Page. So I have tho containers named like the following:

#navbar |  #header (with Button #showNavBar)
        |  #content
        |
        |  #footer

At first the #navbar is behind behind my content area (with header and footer). By clicking the Button #showNavBar I am doing the following:

 header.animate({
           left: "200px"                  
        }, { duration: 300, queue: false });
 content.animate({
           left: "200px"
        }, { duration: 300, queue: false });

So the users can see the navbar on the left side. To this point everything works well. But trouble starts. Now it is possible to scroll to the right side to see the full content area. But it isn't possible to scroll the header...

Does anybody have a hint for me how to avoid the x-scrolling after the animation? I already tried "overflow-x: hidden !important;" to the content container and the body but that doesn't work.

Tell me ae you using jQuery Mobile implementation of navbar, a 3rd party navbar plugin or your implementation? — Gajotres, Jan 23 '13 at 13:30

score 2 · Accepted Answer · answered Jan 23 '13 at 09:02

2

try

 $(document).delegate('.ui-content', 'touchmove', false);

answered Jan 23 '13 at 09:02

Rachel Gallen

27,943
21
72
81

thx for the quick response. Should I put this this in $(document).ready(function(){.... – A.S. Jan 23 '13 at 09:15
1

yes i would put it there. i have not tried it out myself so failing that just put around it and put it in seperately – Rachel Gallen Jan 23 '13 at 09:25
sry I'm not able to give you a upvote "Vote Up requires 15 reputation" and your hint does not do the trick. But I am really thankfull you helped me! – A.S. Jan 23 '13 at 09:31
Do not use document ready with jQuery mobile, it will not work as intended: http://stackoverflow.com/a/14469041/1848600 . It is better to put it into HEAD in a separate js file. Also if possible use .on( instead of .delegate(, .live( or .bind( – Gajotres Jan 23 '13 at 13:28

score 1 · Answer 2 · answered Jan 23 '13 at 10:38

Ok, after rethinking the whole problem I just shrinked the width of my body, so it is not necessary to scroll the content area.

Here is how I do it right now. The body gets a new width in the animation.

var viewport = {
    width  : $(window).width(),
    height : $(window).height()
};

function openme() { 
    $(function () {
        topbar.animate({
           left: "200px"                  
        }, { duration: 300, queue: false });
        pagebody.animate({
           left: "200px", width: (parseInt(viewport['width']) - 200) + "px", 
        }, { duration: 300, queue: false });

      console.log("open me" + (parseInt(viewport['width']) - 200) + "px");
    });
}



function closeme() {
    var closeme = $(function() {
        topbar.animate({
            left: "0px"
        }, { duration: 180, queue: false });
        pagebody.animate({
            left: "0px", width: "100%",
        }, { duration: 180, queue: false });

        console.log("close me");
    });
}

Hope this helps anybody. Thanks to Rachel for beeing so patient and giving me a help!

jQuery mobile disable vertical scroll after transition

2 Answers2