横スクロールを無効にする[終了]

180

どういうわけか、私のウェブページは左から右にスクロールし、醜いスペースがたくさん表示されます。

私は結果で検索しましたが、彼らはただ、スクロールバーが作らHIDDEN

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

私は試しました：overflow-x:hidden私のhtmlタグのCSSで、それはスクロールバーを非表示にするだけで、スクロールを無効にしませんでした。

私を助けてください！

~~ここにページへのリンクがあります：http~~ : ~~//www.green-panda.com/usd309bands/~~（リンク切れ）

これはあなたが私が話していることのより良い考えをあなたに与えるかもしれません：

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

ここに画像の説明を入力してください

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

ここに画像の説明を入力してください

html css

— ユーザー2371301
ソース

1

水平スクロールバーがない場合、どのようにして水平方向にスクロールできますか？

— 冷凍豆のロディ

9

ラップトップでは、マウスを2本の指で左から右に動かします。

— user2371301 2013

1

好奇心から、ページの何がデフォルトのスクロールバーを作成しますか？

— 2013

4

スクロールバーなしでスクロールするには？Windowsで中ホイールクリックのドラッグ。

— Nayuki、2016年

余分なパディングがあるブロックがある必要があります。つまり、100％幅を拡張して削除するのが良い方法です

— 発疹

494

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

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

— koala_dev
ソース

5

それはうまくいきました。私の言っていることが理解できる人を見つけてよかったです。できるだけ早くお受けいたします。

— user2371301 2013

44

Chrome 34では、これは実際にはスクロールを妨げません。スクロールバーを非表示にしますが、中ボタンでスクロールしても、左側に非表示の要素が表示されます。

— gphilip 2014

2

ブラウザウィンドウを最小容量に最小化すると、これは機能しません

— dspacejs

4

：-/ iPhoneでタッチ/モーメンタムスクロールが機能しなくなった

— MarkWPiper

2

愛してる!!

— rochasdv 2016

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%;
}

— アブドゥル・マリク
ソース

13

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

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

次に、jsで、スクロールを探すイベントリスナーを作成し、ユーザーが水平スクロールを試みたことを打ち消しました。

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

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

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

— ディランコープ
ソース

これは私にとってはうまくいきます。ただし、スワイプするとモバイルにジッターが発生します。動きが遅くなる間。

— HardlyNoticeable 2015

「適切に」完全ではないが、それでもなお、優れた創造的な答え。

— Feathercrown 2017年

9

私はそれがあまりにも知っている遅く、しかし、横型オーバーフローを引き起こしているあなたは魔女の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%

お役に立てれば！

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

— モルズバイザウェイ
ソース

サイトの注意として、boundingClientRectがoffsetWidthよりも正確である： - developer.mozilla.org/en-US/docs/Web/API/Element/... - stackoverflow.com/questions/43537559/...

— フール

絶対的な命の恩人！

— テール

8

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

— easa
ソース

5

koala_devはこれがうまくいくと答えました：

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

そして、MarkWPiperは、「：-/タッチ/勢いのあるスクロールがiPhoneで機能しなくなった」とコメントしています。

iPhoneで連絡/勢いを保つための解決策は、html、bodyのcssブロック内に次の行を追加することです。

    height:auto!important;

— ffffff
ソース

どこに置く？bodyタグの下または小さな画面のメディアクエリ？

— Umair 2018

1

@Umairの感謝-高さを明確にするために編集されたコメント：自動行はhtml、body cssブロックに入ります。

— ffffff 2018

身長ありがとうございました：自動ソリューション！

— Torben

2

Koala_devの答えは機能しますが、これが機能する理由はこれが不思議に思っている場合です：

.
q.html, body {              <--applying this css block to everything in the
                             html code.

q.max-width: 100%;          <--all items created must not exceed 100% of the 
                             users screen size. (no items can be off the page 
                             requiring scroll)

q.overflow-x: hidden;       <--anything that occurs off the X axis of the 
                             page is hidden, so that you wont see it going 
                             off the page.

。

— SchadeM
ソース

Thx、私は教育が大好きでした。

— Pimp Trizkit

2

画面幅全体での水平スクロールを無効にする場合は、このコードを使用します。

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

スニペットを展開

これは、親の幅を無視し、代わりにビューポートを使用するため、「100％」よりも適切に機能します。

— ファビアン・フォン・エラッツ
ソース

2

あなたは私たちのhtmlページでこれのすべての方法を試すことができます。

最初の方法

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

今私はもっと.. !!!!について検索しています

— スリクルシュナ
ソース

1

自分で対処する必要がありました。結局、私はこの方法が最も簡単で便利だと思いました。追加するだけ

overflow-x: hidden;

あなたの外側の親へ。私の場合は次のようになります：

<body style="overflow-x: hidden;">

あなたは使用する必要がありoverflow-xますが、使用している場合、単純に使用しているためoverflow、すなわち、あなたも垂直方向のスクロールを無効にしますoverflow-y

垂直スクロールがまだ無効になっている場合は、次のコマンドで明示的に有効にできます。

overflow-y: scroll;

すべてがうまく設定されていれば、この迅速で汚れた方法を使用する必要がないため、その方法はやや適切ではありません。

— ばか
ソース

1

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

上記のスタイルを適用するか、JavaScriptで関数を作成してその問題を解決できます

— ラシケシュモア
ソース

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

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

— オースティン・ブランホースト
ソース

2

私は、CSSの修正は私のプロジェクトでは動作しません。このアウトをしようとするつもりだ、ぐふでもこれは:(動作しません

— Leon

これではうまく

— いき