8

私はCordovaで構築されたアプリを持っており、一部のページでは、コンテンツから空白に水平方向にスクロールできます。

#wrapperに設定されている私のを超えるものは何もないので、これは奇妙width: 100%です。

それで、アプリで水平スクロールを完全に無効にする方法があるかどうか疑問に思いましたか？

アップデート：

要求に応じてページのコード：

body {
    background-color: #fff;
    font-family:Arial, Helvetica, sans-serif;
    color: #b7b8b9;
    height: 100%;
    width: 100%;
}

iframe{
    border: none;
    width: 100%;
    /*margin-top: 50px;*/


   }

#header{
    height: 50px;
    width: 100%;
}


<body>
         <div id="wrapper">
        <div id="header">
            <div class="headerback"><a href="index.html">Home</a></div>
            <div class="headerrefresh"><script>var pathname = window.location.pathname;</script><script>document.write('<a href="'+pathname+'">Refresh</a>')</script></div>
            <div class="headertitle"><h2>Get the Look</h2></div>

        </div><!--HEADER-->
    <iframe src="http://www.mbff.com.au/getthelook"></iframe>
    </div>
    </body>

これは水平スクロールで起こることです

4

6 に答える 6

7

デバイスの正確なサイズを使用して、Chrome（webkit）でページをデバッグしてみてください。これは私にとってほとんどのレンダリングの問題を解決します。

ここで具体的な問題はわかりませんが、要素の1つがラッパーの外に流れているようです。たとえば、これをあなたのcss：で試すことができます

div.wrapper { overflow: hidden; width: inherit; }

ページが水平方向に拡大している理由を調べる方がよいかもしれませんが？

于 2012-07-04T09:36:43.673 に答える
6

私は長い間この問題の解決策を探していました。最後に、次のように解決しました。bodyとhtmlタグのスタイルを設定します。

position: fixed;
width: 100%;
height: 100%;
overflow: hidden;

その後、追加divしbodyてスタイルを設定しました。

overflow-y: auto;
height: 100%;

だから、私は固定ボディを持っています、それは垂直スクロールバー付きのdivを含みます。

于 2015-07-09T14:19:17.297 に答える
4 
// Phone Gap disable only horizontal scrolling in Android.

// Add this code in your Phone Gap  Main Activity.Initially Declare the variable 

private float m_downX;

//Then add this code after loadUrl

this.appView.setOnTouchListener(new View.OnTouchListener() {
    public boolean onTouch(View v, MotionEvent event) {

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN: {
                // save the x
                m_downX = event.getX();
            }
            break;

            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP: {
                // set x so that it doesn't move
                event.setLocation(m_downX, event.getY());
            }
            break;
        }
        return false;
    }
});
于 2012-09-25T07:39:59.843 に答える
4

次のコードを.htmlファイルに追加してみてください。

document.body.addEventListener('touchmove', function(event) {
    event.preventDefault();
}, false);
于 2013-03-26T18:37:53.870 に答える
2

preference完全を期すために、タグを介してそのようなことを行う公式の方法を利用する答えを追加する必要があると思いました。

<preference name="DisallowOverscroll" value="true"/>

ドキュメントに従ってAndroidとiOSでサポートされています。

デフォルト：false

ユーザーがコンテンツの最初または最後をスクロールしたときにインターフェースにフィードバックを表示させたくない場合は、trueに設定します。iOSでは、オーバースクロールジェスチャにより、コンテンツが元の位置に戻ります。Androidでは、コンテンツの上端または下端に沿って、より微妙な光る効果を生み出します。

于 2017-07-13T13:35:32.000 に答える
0

私の場合、以下のようなスタイリングが壊れていました

<body>
  <div style="margin-left:5%; width:100%">Content</div>
</body>

これにより、divが本体よりも水平方向に大きくなります。ブラウザでアプリを実行するとスクロールが表示されました。幅を90％に設定すると（当初の意図どおり）、問題が修正されました。

一般的に、ここですでに指摘したように、ページを水平方向に拡大して修正する間違ったスタイルの要素を見つけるのに十分です。

ところで、上記の場合、 DisallowOverscrollは役に立ちませんでした。

于 2019-12-16T18:35:36.713 に答える