CSS实现点击放大固定定位图片：滚动失效原因与修复方案

滚动失效的原因 #

• .widepicture:focus-within设置了position: fixed但未指定明确的宽度和高度，overflow: scroll只有在容器有尺寸限制时才会生效，否则容器会被内部图片完全撑开，不会触发滚动条。
• 放大状态下的图片用position: relative+width:200vw，父容器.widepicture没有尺寸约束，会跟着图片无限扩展，滚动条失去出现的前提。
• img:focus中添加的overflow: scroll无效，<img>是替换元素，该属性对它不起作用，滚动逻辑应该交给父容器处理。

修复后的代码 #

HTML（修正闭合标签） #

<details>
  <summary>Spoiler</summary>
  <div style="background-color: #a1a1a1;">
    <div class="widepicture"> 
      <img src="images/p2.png" alt="" tabindex="0" />
      <div></div>
    </div>
  </div>
</details>

CSS（核心调整） #

/* 默认状态样式 */
.widepicture{
  -moz-user-select: none; 
  user-select: none;
  overflow: hidden; /* 默认隐藏溢出，避免初始状态出现多余滚动条 */
}
.widepicture img{
    width: var(--wide-picture-width, 100%); /* 给变量加默认值，防止未定义时出错 */
    cursor: zoom-in;
    display: block; /* 替换flex，图片用block更适配 */
}

/* 放大状态：给fixed容器设置明确尺寸 */
.widepicture:focus-within {
  position: fixed;
  top: 15%;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto; /* 按需显示滚动条，比scroll更友好 */
  z-index: 30; /* 保证容器在遮罩层上方 */
}

/* 放大后的图片样式 */
.widepicture img:focus {
  width: 200vw;
  cursor: zoom-out;
  position: relative;
  margin: 0 auto; /* 让大图片居中显示 */
}

/* 遮罩层样式保持不变 */
.widepicture img:focus ~ div {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  background: rgba(200,200,200,.7);
  cursor: zoom-out;
}

关键改动说明 #

1. 给.widepicture:focus-within添加left:0; right:0; bottom:0;，让固定定位的容器占满视口剩余空间，有了明确的尺寸约束后，overflow:auto就能正常触发滚动。
2. 调整默认状态的overflow为hidden，避免初始状态出现不必要的滚动条。
3. 移除img:focus中无效的样式，将层级控制交给父容器，保证交互逻辑的合理性。

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