Question

我有一个关于在jQuery mobile中滚动的问题。我试图在左侧获得一个垂直导航栏，可以通过我页面标题中的按钮进行展开或折叠。所以我有一个名为folling的容器：

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

首先，＃navbar落后于我的内容区域（带有页眉和页脚）。通过单击按钮#showNavBar，我正在使用以下内容：

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

因此用户可以看到左侧的导航栏。到目前为止一切运作良好。但麻烦开始了。现在可以滚动到右侧以查看完整的内容区域。但是滚动标题是不可能的......

有没有人提示我如何避免动画后的x滚动？我已经尝试过“overflow-x：hidden！important;”内容容器和正文但不起作用。

到目前为止，谢谢迎接Soma

Answer 1

试

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

Answer 2

好的，重新思考整个问题之后我只是缩小了身体的宽度，所以没有必要滚动内容区域。

我现在就是这样做的。正文在动画中获得了一个新的宽度。

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

希望这有助于任何人。感谢Rachel如此耐心并给予我帮助！

转换后jquery mobile禁用垂直滚动

2 个答案: