WordPressでモーダルスクロールを実装する方法

2024-02-15 01:46 WordPress モーダルスクロール コード例

以下に、シンプルで簡単な方法とコード例をいくつか紹介します。

  1. CSSを使用した方法: まず、モーダル内のコンテンツを囲む要素に以下のCSSを追加します。
.modal-content {
  overflow-y: scroll;
}

これにより、モーダル内のコンテンツがウィンドウの範囲を超える場合に、スクロールバーが表示されます。

  1. JavaScriptを使用した方法: 以下のJavaScriptコードを使用して、モーダル内のコンテンツがスクロールできるようにします。
jQuery(document).ready(function($) {
  $('.modal-content').on('mousewheel', function(event) {
    event.preventDefault();
    var scrollTop = $(this).scrollTop();
    $(this).scrollTop(scrollTop - event.originalEvent.wheelDelta);
  });
});

このコードでは、モーダル内のコンテンツにマウスホイールイベントを追加し、スクロール動作を制御しています。

  1. プラグインを使用した方法: WordPressには、モーダルスクロールを実現するためのプラグインもあります。例えば、「SimpleModal Login」や「Popup Maker」などのプラグインが利用できます。これらのプラグインは、モーダルウィンドウやポップアップの表示を簡単に設定できるだけでなく、スクロール機能も提供しています。

以上がWordPressでモーダルスクロールを実装する方法です。どの方法を選んでも、モーダル内のコンテンツがスクロールできるようになるはずです。ご参考までに、上記の方法を試してみてください。