スクロールを許可しながらスクロールバーを非表示にする方法

スクロール性を維持しながらスクロールバーを隠す

この質問では、マウスまたはキーボードを使用したスクロール機能を制限せずにスクロールバーを削除する可能性を検討します。重複した質問で述べたように、スクロールバーを無効にするとスクロールも禁止されます。

CSS プロパティの overflow: hidden を使用しようとした結果、スクロールバーとスクロールの両方が非アクティブ化されました。ただし、非表示のスクロールバーを使用してスクロール機能を保持する代替ソリューションが存在します。

このアプローチでは、overflow:hidden スタイルのラッパー分割を利用します。内側のテキストエリアと同じ幅を維持するために、ラッパー部分の幅は、テキストエリアのスクロール幅からスクロールバーの幅を引いた値に設定されます。これは、次のように JavaScript で実現されます。

// Determine the textarea width without scrollbar
var textareaWidth = document.getElementById("textarea").scrollWidth;

// Set the wrapper div width to the textarea width
document.getElementById("wrapper").style.width = textareaWidth + "px";

さらに、この原則を拡張して、スクロールバーなしでスクロール可能な div を作成できます。

以上がスクロールを許可しながらスクロールバーを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。