1

jQuerymobileでのスクロールに関して問題があります。ページのヘッダーにあるボタンを使用して展開または折りたたむことができる左側の垂直ナビゲーションバーを取得しようとしています。だから私は次のような名前のコンテナを持っています：

#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;」を試しました。コンテンツコンテナと本文に追加しますが、それは機能しません。

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 に答える