如何在点击特定按钮时为WordPress的body添加样式禁用滚动

算力阿峰

2026-8-16

实现点击按钮时禁用WordPress页面滚动

你可以通过以下几种方式实现需求：

方法1：修改现有`openNav()`函数

你的按钮已经绑定了onclick="openNav()"，直接在这个函数中添加修改body样式的代码即可：

function openNav() {
  // 保留你原来展开侧边栏的逻辑代码
  document.body.style.overflow = 'hidden';
}

如果需要在关闭侧边栏时恢复页面滚动，可以添加对应关闭函数：

function closeNav() {
  // 保留你原来关闭侧边栏的逻辑代码
  document.body.style.overflow = 'auto'; // 恢复默认滚动行为
}

方法2：使用事件监听（无需修改HTML内联属性）

如果不想依赖内联onclick，可以通过JS事件监听绑定点击行为：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const openButton = document.querySelector('.openbtn');
  if (openButton) {
    openButton.addEventListener('click', function() {
      // 这里可以执行侧边栏展开逻辑
      document.body.style.overflow = 'hidden';
    });
  }
});

方法3：jQuery写法（适配WordPress默认环境）

WordPress默认加载了jQuery，你也可以用jQuery实现：

jQuery(document).ready(function($) {
  // 点击openbtn按钮时禁用滚动
  $('.openbtn').on('click', function() {
    $('body').css('overflow', 'hidden');
  });
  // 示例：点击关闭按钮时恢复滚动（根据你的关闭按钮类名调整）
  $('.closebtn').on('click', function() {
    $('body').css('overflow', 'auto');
  });
});