如何禁用頁面的單擊和滾動？

Question

我在網站的左下方創建了一個“更多”按鈕，以顯示菜單。

當您單擊按鈕時，+變為x

我希望當您單擊+時，單擊和滾動將在頁面上被禁用。

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <div class="fa-4x">
      <span class="fa-layers fa-fw">
        <i class="fas fa-circle"></i>
        <i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
      </span>
    </div>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdown-menu-action">
    <li><a href="/profil" data-drupal-link-system-path="profil"><i class="fas fa-id-card fa-lg"></i> Créer mon profil</a></li>
  </ul>
</div>

這是我的樣式表

.overlay-is-navbar-collapse {
    overflow: hidden;
    pointer-events: none;
}

這是我的JS文件：

(function ($) {

  $('#dropdown-menu-action').on('show.bs.dropdown', function () {
       $('body').addClass('overlay-is-navbar-collapse');
  });

  $('#dropdown-menu-action').on('hide.bs.dropdown', function () {
       $('body').removeClass('overlay-is-navbar-collapse');
  });

})(window.jQuery);

UPDATE

以下代碼不起作用。 如果單擊外部，則菜單關閉，但課程仍保留在主體上。

  $('#dropdown-menu-action').on('click', () => {
       $('body').toggleClass('overlay-is-navbar-collapse');
  });

我已經嘗試了以下代碼，但是不起作用：

  $('#dropdown-menu-action').on('shown.bs.dropdown', function () {
       $('body').addClass('overlay-is-navbar-collapse');
  });

  $('#dropdown-menu-action').on('hidden.bs.dropdown', function () {
       $('body').removeClass('overlay-is-navbar-collapse');
  });

Answer 1

在您的JavaScript文件中，添加click處理程序以切換主體類名稱overlay-is-navbar-collapse

(function ($) {

  $('#dropdown-menu-action').on('click', () => {
   $('body').toggleClass('overlay-is-navbar-collapse');
  });

})(window.jQuery);

並刪除 pointer-events: none從CSS文件中刪除任何 pointer-events: none ，否則，一旦添加了類名overlay-is-navbar-collapse ，便無法再次單擊該按鈕。

.overlay-is-navbar-collapse {
    overflow: hidden;
}

Answer 2

您可以在主體上添加一個類以直接在所需的任何軸或所有軸上禁用滾動或編輯樣式。 body.class { overflow-y: hidden; }