web-dev-qa-db-ja.com

HTMLスクロールバーを削除しますが、マウスホイールのスクロールは許可します

可能性のある複製：
ブラウザまたは要素のスクロールバーを無効にするが、ホイールまたは矢印キーでのスクロールを許可する方法

CSSプロパティoverflow-y: hiddenを設定することで、グリッド内の垂直スクロールバーを無効にすることができました。ただし、これにより、マウスホイールでコンテンツをスクロールする機能も削除されました。

スクロールバーを表示せずに、マウスホイールまたは矢印キーでコンテンツをスクロールできるようにする方法はありますか？

htmlscrollmousewheel
43
Sameer

Javascriptメソッドがあります。複製したスレッドを参照してください。

より良い解決策は、ターゲットdivをoverflow：scrollに設定し、overflow：hiddenである8pxより狭い2番目の要素でラップすることです。

ターゲット要素には非表示のスクロールバーがあります。マウスホイールは機能しますが、スクロールバーは表示されません。

<div style='overflow:hidden; width:200px;'>
   <div style='overflow:scroll; width:208px'>
      My mousewheel scrollable content here....
   </div>
</div>

スクロールバーの幅としての8pxは乱数であることに注意してください-それはおそらくもっと多く、ブラウザーごとにCSSが必要になる可能性があります。

私の本ではJSよりも優れています。

62
SamGoody

jScrollPane を使用すると、ブラウザのスクロールバーをカスタムのものに置き換えることができます。

これらのカスタムスクロールバーはCSSでスタイル設定できるため、簡単に非表示にできます（次のようなものを試してください：.jScrollPaneTrack { display: none; }）

1
vitch