注: 最新バージョンの Chrome を使用しています。
私は、多くの JavaScript を使用したレイアウトを利用する Web アプリケーションに取り組んでいます。私が抱えている主な問題は、一部のレイアウトではウィンドウの垂直スクロールバーが表示され (コンテンツがウィンドウからはみ出すため)、レイアウト プロセス中にページの幅に影響することです。ほとんどの場合、レイアウト関数を 2 回呼び出すことでこの問題を回避しています。最初の呼び出しでスクロール バーが表示され、2 回目の呼び出しでページの正しい幅が使用されます。しかし、それはまだ最も頻繁に起こる頭痛です。
デフォルトのスクロールバーを完全に削除してこの問題を修正し、ページの幅に影響を与えるのではなく、コンテンツの上に透明に浮かぶ軽いカスタム スクロールバーを実装したいと思います。ただし、マウスホイールを使用してもスクロールできなくすることなく、ウィンドウのスクロールバーを削除することはできないようです。JSFiddle の例を次に示します。
ご覧のとおり、 を使用するとスクロールバーが非表示になりますoverflow-y: hiddenが、スクロールできなくなり、スクロールバーがoverflow-y: visible表示されます。ウィンドウのスクロール機能に影響を与えずに、ウィンドウのスクロールバーを非表示にすることはできますか?
注意:私はブラウザー ウィンドウのスクロールバーについて話しているのであって、その中のスクロール可能な要素のスクロールバーについて話しているのではありません。この 2 つは、パフォーマンスに関しても、異なるブラウザーやモバイル プラットフォームでの動作に関しても、大きく異なります。
私の黙想。
これを実現する方法はいくつかあります。
- JavaScript を使用して body タグの高さを取得し、スクロールとカスタム スクロール バーをエミュレートします。ただし、パフォーマンスとクロスプラットフォームの互換性の両方の理由から、ブラウザーがネイティブのスクロールを行うことを好むと確信しています。これは、モバイル ブラウザーでのスワイプ スクロールにも問題があると確信しています。
- WebKit の新しいバージョンでは、CSS を使用してスクロールバーを非表示にできます:
body::-webkit-scrollbar { display: none; }. これは完璧ですが、Opera や Firefox のユーザーには役に立ちません。（IEユーザーをねじ込みます。）
ご覧のとおり、これらの方法はどちらも良い方法ではありません。そのため、あなたの意見が本当に必要です。