点击手风琴组件时外层div上移，overflow:hidden与图片溢出冲突如何解决？

问题根本原因 #

你使用:target伪类触发手风琴展开的逻辑会触发浏览器默认的锚点滚动行为，外层容器设置overflow: hidden后，锚点滚动会作用在该容器内部，最终表现为整个容器上移。

解决方案 #

• 方案一（改造成本最低，无需改动现有CSS）：给所有手风琴点击链接添加阻止默认锚点跳转的JS逻辑，代码如下：

document.querySelectorAll('.accordion-link').forEach(link => {
  link.addEventListener('click', e => {
    e.preventDefault();
    // 保留hash状态且不触发页面跳转
    const targetHash = link.getAttribute('href');
    history.pushState(null, null, targetHash);
    // 手动触发重排保证:target选择器生效
    document.body.offsetHeight;
  })
})

该方案可保留你原有的overflow: hidden设置，同时解决图片溢出的问题。

• 方案二（纯CSS实现，无需JS）：将手风琴触发逻辑从:target伪类替换为checkbox的:checked伪类，完全规避锚点跳转问题。大致实现逻辑为：在每个手风琴项内插入隐藏的checkbox元素，用<label>绑定checkbox替代原有的<a>点击标题，通过.accordion-checkbox:checked ~ .answer选择器控制内容展开，和你原有展开逻辑一致，不影响外层overflow设置。

• 方案三（CSS临时修复，兼容性一般）：给你设置了overflow: hidden的外层容器添加以下两条样式：

/* 此处替换为你外层容器的实际类名 */
.container {
  scroll-behavior: auto;
  overflow-anchor: none;
}

该方案无需改动业务逻辑，但部分老旧浏览器可能不兼容。

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