ページ全体をスクロールできるようにしたいのですが、スクロールバーが表示されません。
グーグルクロームでは'。
::-webkit-scrollbar {
display: none;
}
しかし、Mozilla FirefoxやInternet Explorerでは、そのようにはいかないようです。
また、CSSでも試してみました。
overflow: hidden;
これでスクロールバーは隠れますが、それ以上はスクロールできません。
ページ全体をスクロールできる状態でスクロールバーを削除する方法はありますか?
CSSかHTMLでお願いします。
テストしてみましたが、問題なく動作しています。
#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で処理するのが良いでしょう。Element.offsetWidth - Element.clientWidth`とすれば、正確なスクロールバーの幅が表示されます。
[JavaScript Working Fiddle][2]。
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]を参照してください。
この回答をもとに、simple scroll pluginを作成しました。
使う。
<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