如何修复overflow:hidden隐藏区块失效及JS异常问题

我编写了区块切换代码，逻辑本身无明显问题，但未显示区块的隐藏存在异常：

• 尝试将未显示区块移至视口外时，区块仍会显示在页面下方
• 在测试站点使用overflow:hidden属性可正常隐藏区块，但移植到主项目后该属性失效，同时JS也停止工作

相关代码 #

JS代码 #

const blocks = document.querySelectorAll('.block');
let currentIndex = 0;

function showBlock(index) {
  blocks.forEach((block, i) => {
    if (i === index) {
      block.classList.add('visible');
    } else {
      block.classList.remove('visible');
    }
  });
}

const rightButton = document.getElementById('rightButton');
rightButton.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % blocks.length;
  showBlock(currentIndex);
});

const leftButton = document.getElementById('leftButton');
leftButton.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + blocks.length) % blocks.length;
  showBlock(currentIndex);
});

showBlock(currentIndex);

HTML结构 #

<section id="information">
    <div class="information">
        <div class="container">
            <div class="information__block__mod">
                <!--p>1</p-->
                <div class="block visible" id="block1">
                    <div class="title_antivirus">
                        <div class="title__block">
                            <span class="texttitleblock">Kaspersky Lab </span>
                        </div>
                    </div>
                    <div class="content__base">
                        <div class="img__content">
                            <img src="../project/img/img/rect.png" alt="" class="img__1">
                            <img src="../project/img/img/rect.png" alt="" class="img__2">
                            <img src="../project/img/img/rect.png" alt="" class="img__3">
                        </div>
                        <div class="text__block">
                            <div class="text__information">
                                <span class="text">
                                    <p>A</p>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="buttonlinkcyte">
                        <button class="link__cyte"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="footer">
            <footer class="footer">
                <div class="container">
                    <div class="footer__row">
                        <button class="link__wk">
                            <img src="../project/img/Footer_button/wk.svg" alt="">
                        </button>
                        <button class="link__tg">
                            <img src="../project/img/Footer_button/telegramm.svg" alt="">
                        </button>
                        <button class="link__tg_bot">
                            <img src="../project/img/Footer_button/msg_bot.svg" alt="">
                        </button>
                        <button class="link__git">
                            <img src="../project/img/Footer_button/GitHub.svg" alt="">
                        </button>
                    </div>
                </div>
            </footer>
        </div>
</section>
</body>
<script>
    <!--Here my js-->
</script>

使用的CSS代码 #

overflow: hidden;

问题排查与解决方案 #

1. 修复JS停止工作问题 #

• 确保DOM加载完成后执行JS：主项目中可能存在DOM动态渲染或加载顺序问题，将代码包裹在DOMContentLoaded事件中，同时增加元素存在性判断避免报错：

document.addEventListener('DOMContentLoaded', () => {
  const blocks = document.querySelectorAll('.block');
  let currentIndex = 0;

  function showBlock(index) {
    blocks.forEach((block, i) => {
      i === index ? block.classList.add('visible') : block.classList.remove('visible');
    });
  }

  const rightButton = document.getElementById('rightButton');
  if (rightButton) {
    rightButton.addEventListener('click', () => {
      currentIndex = (currentIndex + 1) % blocks.length;
      showBlock(currentIndex);
    });
  }

  const leftButton = document.getElementById('leftButton');
  if (leftButton) {
    leftButton.addEventListener('click', () => {
      currentIndex = (currentIndex - 1 + blocks.length) % blocks.length;
      showBlock(currentIndex);
    });
  }

  showBlock(currentIndex);
});

• 检查控制台报错：按下F12打开浏览器开发者工具，查看Console面板是否有元素未找到、变量冲突等错误，针对性修复。
• 避免重复ID：确认主项目中没有重复使用rightButton/leftButton这类ID，否则会导致事件绑定失败。

2. 修复overflow:hidden失效问题 #

• 正确设置父容器样式：overflow:hidden必须作用在包含所有区块的父容器上，且需配合定位和高度设置，比如给.information__block__mod添加：

.information__block__mod {
  position: relative;
  overflow: hidden;
  height: 100%; /* 或设置固定高度，需与区块高度匹配 */
}

• 排查CSS样式冲突：检查主项目中是否有其他CSS规则通过!important或更高优先级覆盖了overflow:hidden，比如全局的* { overflow: visible !important; }。
• 优化区块隐藏逻辑：放弃移至视口外的方式，改用定位+显隐控制更可靠：

.block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.block.visible {
  opacity: 1;
  visibility: visible;
  position: relative; /* 若需区块正常占据布局空间则保留，否则可移除 */
}

3. 额外检查点 #

• 确认所有切换区块都拥有.block类，且都嵌套在.information__block__mod容器内。
• 检查主项目的全局CSS是否改变了区块的display、position等核心属性，导致隐藏逻辑失效。

内容的提问来源于stack exchange，提问作者Игорь Соловьев