1

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

#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 滚动？我已经尝试过“溢出-x：隐藏！重要；” 到内容容器和正文，但这不起作用。

4

2 回答 2

2

尝试

 $(document).delegate('.ui-content', 'touchmove', false);​
于 2013-01-23T09:02:25.970 回答
1

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

这是我现在的做法。身体在动画中获得了新的宽度。

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

希望这对任何人都有帮助。感谢瑞秋如此耐心并给了我帮助！

于 2013-01-23T10:38:25.553 回答