228

なんらかの理由で、私の Web ページが左から右にスクロールし、多くの見苦しいスペースが表示されます。

結果を検索しましたが、スクロールバーが非表示になりました

それが今私が欲しいものです。水平スクロール機能を物理的に無効にしたいのです。ユーザーがページを上下に左右にスクロールできるようにしたくありません。

overflow-x:hiddenタグのcssで試しましhtmlたが、スクロールバーが非表示になっただけで、スクロールが無効になりませんでした。

私を助けてください！

ページへのリンクは次のとおりです: http://www.green-panda.com/usd309bands/ (リンク切れ)

これにより、私が話していることのより良いアイデアが得られるかもしれません:

これは、最初のページが読み込まれるときです。

ここに画像の説明を入力

そして、これは右にスクロールした後です。

ここに画像の説明を入力

4

12 に答える 12

636

これをCSSに追加してみてください

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
于 2013-07-19T22:53:45.147 に答える
15

したがって、これを適切に修正するために、ここで他の人が行ったことを行い、css を使用して水平ツールバーを非表示にしました。

.name {
  max-width: 100%;
  overflow-x: hidden;
}

次に、js で、スクロールを探すイベント リスナーを作成し、ユーザーが水平スクロールを試みないようにしました。

var scrollEventHandler = function()
{
  window.scroll(0, window.pageYOffset)
}

window.addEventListener("scroll", scrollEventHandler, false);

誰かが似たようなことをしているのを見ましたが、どうやらうまくいかなかったようです。しかし、これは私にとっては完全にうまく機能しています。

于 2015-08-29T23:54:40.663 に答える
14

手遅れであることはわかっていますが、魔女のhtml要素が水平オーバーフローを引き起こしていることを検出するのに役立つJavaScriptのアプローチがあります->スクロールバーが表示されます

CSS トリックに関する記事へのリンクは次のとおりです。

var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

それは次のようなものを返すかもしれません:

<div class="div-with-extra-width">...</div>

div次に、またはセットから余分な幅を削除するだけですmax-width:100%

お役に立てれば！

それは私のために問題を修正しました:]

于 2017-10-17T00:28:58.903 に答える
13

これはあなたのコードの厄介な子です:)

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}

で置き換えます

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 100%;
}
于 2013-07-19T22:55:44.930 に答える
9

これを試して、本文だけの幅スクロールを無効にします。すべてのドキュメントは本文だけです body{overflow-x: hidden;}

于 2015-07-16T03:48:55.743 に答える
9

このすべての方法は、HTML ページで試すことができます。

第1の方法

body { overflow-x:hidden; }

第 2 の方法 CSS body タグで以下を使用できます。

overflow-y: scroll; overflow-x: hidden;

これにより、スクロールバーが削除されます。

第三の道

body { min-width: 1167px; }

5番目の方法

html, body { max-width: 100%; overflow-x: hidden; }

6番目の方法

element { max-width: 100vw; overflow-x: hidden; }

4番目の方法..

var docWidth = document.documentElement.offsetWidth; [].forEach.call( document.querySelectorAll('*'), function(el) { if (el.offsetWidth > docWidth) { console.log(el); } } );

今、もっと探しています..!!!!

于 2019-05-19T01:56:44.710 に答える
0

ボディ スクロール イベントを JavaScript でオーバーライドし、水平スクロールを 0 にリセットできます。

function bindEvent(e, eventName, callback) {
    if(e.addEventListener) // new browsers
        e.addEventListener(eventName, callback, false);
    else if(e.attachEvent) // IE
        e.attachEvent('on'+ eventName, callback);
};

bindEvent(document.body, 'scroll', function(e) {
    document.body.scrollLeft = 0;
});

画面が小さいユーザーの機能が制限されるため、これを行うことはお勧めしません。

于 2013-07-19T22:51:39.290 に答える