マウスとキーボードのスクロールを許可しながらスクロールバーを非表示にする方法

マウス/キーボードのスクロールを維持しながらスクロールバーを非表示にする

この質問は重複としてマークされていますが、元のスレッドでは適切に対処されていませんでした。マウスによるスクロールを有効にしたままスクロールバーを非表示にするという特定の問題、または

元の質問:

マウスまたはキーボードによるスクロールを許可したままスクロールバーを非表示にすることはできますか?

CSS オーバーフロー: 隠れた制限:

CSSプロパティ オーバーフロー: hidden はスクロールバーを非表示にするために使用できますが、スクロール機能を完全に無効にすることもできます。

jQuery ソリューション (オリジナル):

元のスレッドは jQuery を提案しましたスクロールバーを使用せずにテキストエリアの幅を動的に測定し、それに応じてラッパー div の幅を設定するソリューション。これにより、スクロールバーが表示されずにスクロール可能な div のように見えます。

// get the width of the textarea minus scrollbar
var textareaWidth = document.getElementById("textarea").scrollWidth;

// width of our wrapper equals width of the inner part of the textarea
document.getElementById("wrapper").style.width = textareaWidth + "px";

JavaScript ソリューション (jQuery なし):

または、同じ原則を jQuery なしで適用することもできます。 jQuery:

document.getElementById("wrapper").style.overflow = "hidden";

// get the width of the textarea minus scrollbar
var textareaWidth = document.getElementById("textarea").scrollWidth;

// width of our wrapper equals width of the inner part of the textarea
document.getElementById("wrapper").style.width = textareaWidth + "px";

Update:

同じ原理を使用して、CSS と JavaScript を使用してスクロールバーなしでスクロール可能な div を作成できます。

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