スクロール機能を維持しながらブラウザのスクロールバーを無効にする方法

スクロール機能を維持しながらブラウザと要素のスクロールバーを無効にする

Web デザインに関しては、スクロールバーを無効にする必要がある場合があります。特定の美的または機能的な目標を達成しながら、同時にユーザーがマウス ホイールまたは矢印キーを使用してコンテンツをスクロールできる機能も維持します。この課題に取り組む方法は次のとおりです。

スクロールバーの非表示

特定の div 要素またはドキュメント本文全体からスクロールバーを非表示にするには、次の CSS ルールを採用します。

overflow: hidden;

これにより、ターゲットのスクロールバーが効果的に非表示になります。

JavaScript によるスクロールのエミュレート

スクロールバーを表示せずにスクロール機能を有効にするには、JavaScript を利用する必要があります:

マウスホイール スクロール

マウス ホイール スクロールには、次の機能を利用できます。 「mousewheel」イベントを使用して、ターゲット要素のscrollTop値を動的に調整します。たとえば、jQuery を使用すると、

$("#example").bind("mousewheel", function(ev, delta) {
    var scrollTop = $(this).scrollTop();
    $(this).scrollTop(scrollTop - Math.round(delta));
});

矢印キーのスクロール

矢印キーによるスクロールをエミュレートするには、「keydown」イベント リスナーをドキュメントにバインドします (必要な場合) )、それに応じてscrollTopとscrollLeftを調整します。 IE の互換性の問題のため、「keypress」の代わりに「keydown」を使用してください。

例

マウス ホイールと矢印キーのスクロールの両方を組み合わせた実用的な例を次に示します。

<div>

以上がスクロール機能を維持しながらブラウザのスクロールバーを無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。