スクロールバーを非表示にするが、スクロールは可能なまま

ページ全体をスクロールできるようにしたいのですが、スクロールバーが表示されません。

グーグルクロームでは'。

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

しかし、Mozilla FirefoxやInternet Explorerでは、そのようにはいかないようです。

また、CSSでも試してみました。

overflow: hidden;

これでスクロールバーは隠れますが、それ以上はスクロールできません。

ページ全体をスクロールできる状態でスクロールバーを削除する方法はありますか？

CSSかHTMLでお願いします。

Peter Mortensen
編集された質問 10日 11月 2019 в 11:47
プログラミング
internet-explorer firefox google-chrome html css
21日 5月 2013 в 1:11
22 ビュー
ソリューション

テストしてみましたが、問題なく動作しています。

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

[作業用フィドル][1]。

JavaScriptです。

スクロールバーの幅はブラウザごとに異なるので、JavaScriptで処理するのが良いでしょう。Element.offsetWidth - Element.clientWidth`とすれば、正確なスクロールバーの幅が表示されます。

[JavaScript Working Fiddle][2]。

Or

Position: absolute`を使用します。

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

[作業用バイオリン][3]。

[JavaScript Working Fiddle][4]を参照してください。

Information

この回答をもとに、simple scroll pluginを作成しました。

Peter Mortensen
編集した答え 10日 11月 2019 в 11:49
解説 (23)

使う。

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

スクロールバーを持たないdivと重なっている場合に、スクロールバーを多少オーバーラップさせるためのトリックです。

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

これはWebKitブラウザのみですが...。 また、ブラウザ固有のCSSコンテンツを使用することもできます（将来的にある場合）。すべてのブラウザが、それぞれのバーに対して異なる固有のプロパティを持つことができます。

Microsoft Edgeの場合は次のようにします。MSDN]2にあるように、-ms-overflow-style: -ms-autohiding-scrollbar;または-ms-overflow-style: none;を使用してください。

Firefoxではこれに相当するものはありません。 ただし、これを実現するjQueryプラグインがあります。 http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Peter Mortensen
編集した答え 5日 4月 2019 в 2:26
解説 (6)

追加

    overflow: -moz-scrollbars-none;

を追加するとうまくいきました。

Peter Mortensen
編集した答え 5日 4月 2019 в 2:26
解説 (5)