ブラウザの垂直および水平スクロールバーを無効にします

117

jQueryまたはjavascriptを使用してブラウザーの垂直および水平スクロールバーを無効にすることは可能ですか？

javascript jquery

— ナヴィーン
ソース

：私はあなたがスクロールして、このソリューションがより好ましいノースクロールを切り替えたい場合は、特別に、いくつかの状況で考えるstackoverflow.com/questions/8701754/...

— ユセフSalimpour

この質問に対するより完全な回答は、こちらのstackoverflow.com/a/25561646/1922144

— davidcondrey

144

動的にスクロールバーを表示したり非表示にしたりする必要がある場合は、

$("body").css("overflow", "hidden");

そして

$("body").css("overflow", "auto");

コードのどこかに。

— アレクサンドル・プロコフィエフ
ソース

4

非表示のオーバーフローはIEで常に機能するとは限りません。以下のAnthonyWJonesの回答を参照してください。

— ティアゴアルメイダ

4

oveflow: hiddenスマートフォンでは何も妨げません。

— dvlden 2014年

クロームでは、これはスクロールバーを隠さずに無効にします（まだそこにあり、他のすべてのサイズを変更していますが、現在はグレー表示されています）

— taltamir

120

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // ie only
}

— リンセ
ソース

5

2つの賛成票は、純粋なjavascriptの唯一の回答であるため、著しく少ないです。

— Fzs2

2

@HermannIngjaldsson：OPがJavaScriptまたはjQueryソリューションを要求し、4年前にjQueryソリューションを受け入れたことを見るのは理にかなっています。私は答えが良くないと言っているのではなく、投票数が少ないことについて明白に述べているだけです。とにかく私から+1。

— 2013年

これは私にとって有効な唯一の解決策です。本文の非表示のオーバーフローはドキュメント全体を攻撃しないため、これはこの問題の正しい解決策です！どうもありがとうございました。

— Adnane.T 2014年

これは素晴らしいソリューションであり、賛成に値します。また、ページが上にスクロールされる、固定cssの問題も解決します。

— haipham23

50

CSSを試す

<body style="overflow: hidden">

— レイ・ルー
ソース

15

ブラウザーの互換性のために、このスタイルをHTMLタグにも追加します：html、body {overflow：hidden;}

— Ady

32

これまでのところ、overflow：bodyが非表示になっています。ただし、IEは常にそれを尊重するとは限らず、body要素にもscroll = "no"を配置するか、html要素にもoverflow：hiddenを配置する必要があります。

あなたがこれを行うことができるビューポートを「制御する」必要があるとき、これをさらに進めることができます：-

<style>
 body {width:100%; height:100%; overflow:hidden; margin:0; }
 html {width:100%; height:100%; overflow:hidden; }
</style>

本文で100％の高さを許可された要素は、ウィンドウのビューポートの完全な高さを持ち、bottom：nnPXを使用して絶対的に配置された要素は、ウィンドウの下端のnnピクセル上に設定されます。

— アンソニーWジョーンズ
ソース

2

body cssの「、」は「;」である必要はありませんか？

— paynestrike 2015年

12

CSSを試してください。

水平を削除したい場合

overflow-x: hidden;

そして、垂直を削除したい場合

overflow-y: hidden;

— シャフラーズ
ソース

10

IEの最新バージョン（IE10以降）では、-ms-overflow-styleプロパティを使用してスクロールバーを非表示にできます。

html {
     -ms-overflow-style: none;
}

Chromeでは、スクロールバーにスタイルを設定できます。

::-webkit-scrollbar {
    display: none;
}

これは、Webアプリケーションで「デフォルト」のボディスクロールを使用する場合に非常に便利ですoverflow-y: scroll。

— Lg102
ソース

これだけがすべての答えから私にとってうまくいきました:)ありがとう！

— Gediminas

9

Internet Explorer 6のサポートも必要な場合は、htmlをオーバーフローしてください

$("html").css("overflow", "hidden");

そして

$("html").css("overflow", "auto");

— ガウィン
ソース

5

IEにはスクロールバーに関するいくつかのバグがあります。したがって、2つのうちどちらかが必要な場合は、次のものを含めて水平スクロールバーを非表示にする必要があります。

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

垂直を隠すには：

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

— ジーシャンアリ
ソース

4

（まだコメントはできませんが、これを共有したいと思いました）：

Lynceeのコードはデスクトップブラウザで動作しました。ただし、iPad（Chrome、iOS 9）では、アプリケーションがクラッシュしました。それを修正するために、私は変更しました

document.documentElement.style.overflow = ...

に

document.body.style.overflow = ...

これは私の問題を解決しました。

— エラスムスセダーネス
ソース

2

Firefoxは、矢印キーのショートカットを持っているので、あなたはおそらく入れたい<div>CSSスタイルとその周り：overflow:hidden;。

— Qvcool
ソース

2

JQueryを使用すると、次のコードでスクロールバーを無効にできます。

$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
     }
});

また、次のコードで再度有効にすることができます：

 $('body').unbind('mousewheel');

— gtzinos
ソース