ホームページ >ウェブフロントエンド >CSSチュートリアル >スクロール機能を維持したままスクロールバーを非表示にすることはできますか?
スクロール機能を維持しながらスクロールバーを非表示にする方法
マウスまたはキーボードを使用してスクロールする機能を維持したまま、スクロールバーを非表示にすることができます。 。 1 つの方法では、CSS と JavaScript を使用します。
CSS プロパティの overflow: hidden を使用すると、スクロールバーが非表示になります。ただし、これによりスクロール機能も無効になります。
スクロール機能を復元するには、JavaScript を使用できます。スクロール可能な要素内のコンテンツの幅を計算し、外側のラッパー要素の幅をその幅に設定すると、コンテンツのスクロールを許可しながらスクロールバーを非表示にすることができます。
例:
// Calculate the textarea width excluding the scrollbar var textareaWidth = document.getElementById("textarea").scrollWidth; // Set the wrapper width to the textarea width document.getElementById("wrapper").style.width = textareaWidth + "px";
このアプローチを使用すると、スクロールバーは非表示になりますが、マウスとキーボードによるスクロールは引き続き有効です。
さらに、同じ原則を適用して、スクロールバーを表示せずにスクロール可能な div を作成することもできます。
以上がスクロール機能を維持したままスクロールバーを非表示にすることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。