如何禁用页面点击与滚动？自定义下拉按钮交互需求实现

嘿，我来帮你搞定这个需求！要实现点击「更多」按钮的+图标打开菜单时，禁用页面的点击和滚动功能，同时切换图标为x，咱们可以结合JavaScript、CSS来实现，下面是具体的实现方案：

HTML 结构 #

先把你的按钮结构补全，同时添加一个遮罩层用来阻止页面点击：

<!-- 左下角的更多按钮 -->
<div class="dropup position-fixed bottom-0 left-0 m-3">
  <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 text-primary"></i>
        <!-- 初始显示+图标，切换时换成x -->
        <i class="fas fa-plus text-white fa-inverse" data-icon="toggle"></i>
      </span>
    </div>
  </button>
  <!-- 下拉菜单内容 -->
  <div class="dropdown-menu" aria-labelledby="dropdown-menu-action">
    <a class="dropdown-item" href="#">菜单选项1</a>
    <a class="dropdown-item" href="#">菜单选项2</a>
    <a class="dropdown-item" href="#">菜单选项3</a>
  </div>
</div>

<!-- 页面遮罩层，用来阻止点击 -->
<div id="page-overlay" class="page-overlay d-none"></div>

CSS 样式 #

添加禁用滚动和遮罩层的样式：

/* 禁用页面滚动的类 */
body.no-scroll {
  overflow: hidden;
  height: 100vh;
}

/* 全屏遮罩层样式 */
.page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2); /* 半透明黑色，可选 */
  z-index: 999; /* 确保在菜单下方，页面内容上方 */
}

/* 下拉菜单的层级要高于遮罩层 */
.dropup .dropdown-menu {
  z-index: 1000;
}

JavaScript 逻辑 #

监听按钮点击事件，实现图标切换、滚动禁用和点击阻止：

const dropdownBtn = document.getElementById('dropdown-menu-action');
const toggleIcon = dropdownBtn.querySelector('[data-icon="toggle"]');
const pageOverlay = document.getElementById('page-overlay');
const body = document.body;

dropdownBtn.addEventListener('click', function(e) {
  // 切换图标：+ ↔ x
  toggleIcon.classList.toggle('fa-plus');
  toggleIcon.classList.toggle('fa-times');
  
  // 切换页面滚动状态
  body.classList.toggle('no-scroll');
  
  // 切换遮罩层显示/隐藏
  pageOverlay.classList.toggle('d-none');
  
  // 阻止事件冒泡，避免触发遮罩层的关闭逻辑
  e.stopPropagation();
});

// 点击遮罩层时关闭菜单，恢复页面功能
pageOverlay.addEventListener('click', function() {
  dropdownBtn.click(); // 触发按钮点击事件，自动恢复所有状态
});

// 如果使用Bootstrap的dropdown组件，监听菜单隐藏事件，确保状态同步
document.querySelector('.dropdown-menu').addEventListener('hidden.bs.dropdown', function() {
  toggleIcon.classList.add('fa-plus');
  toggleIcon.classList.remove('fa-times');
  body.classList.remove('no-scroll');
  pageOverlay.classList.add('d-none');
});

• 图标切换：通过切换Font Awesome的fa-plus和fa-times类实现图标变化。
• 禁用滚动：给body添加no-scroll类，用overflow: hidden和height: 100vh固定视口，阻止滚动。
• 阻止页面点击：用全屏遮罩层覆盖页面，点击遮罩层时关闭菜单，同时遮罩层的z-index设置确保它在页面内容上方、菜单下方，既不遮挡菜单又能阻止内容点击。
• 状态同步：监听Bootstrap dropdown的hidden.bs.dropdown事件，确保菜单通过其他方式关闭时（比如点击菜单外），页面状态能正确恢复。

这样一来，当你点击+图标打开菜单时，页面就会被锁定，无法滚动和点击内容；点击x图标或遮罩层时，又能恢复正常功能啦！

内容的提问来源于stack exchange，提问作者steeve61