CSS overflow设置异常 如何实现iPad框内可滚动的长网页截图展示

核心错误点 #

• overflow属性绑定到了错误的容器上，外层.nest如果加滚动会连iPad边框一起滚动，不符合需求
• 装长截图的.container没有设置overflow，给img元素设置overflow不会生效（img是替换元素，本身没有滚动区域）
• 元素层级顺序错误，iPad边框需要固定在最上层，避免滚动内容溢出覆盖边框

修正后代码 #

CSS #

/* 外层容器只负责定位，不加滚动，尺寸和iPad边框匹配 */
.nest {
  position: relative;
  width: 712px;
  height: 810px; /* 调整到和你iPad边框高度一致即可 */
}
/* iPad边框固定在最上层，不跟随滚动 */
.ipad {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9; /* 层级高于内容容器 */
  width: 100%;
  height: 100%;
  pointer-events: none; /* 避免边框挡住滚动操作，让点击滚动事件穿透到下方内容 */
}
/* 内容容器放在iPad屏幕区域，加滚动 */
.container{ 
  position: absolute;
  top: 45px; /* 匹配iPad屏幕上边距，自行微调 */
  left: 32px; /* 匹配iPad屏幕左边距，自行微调 */
  width: 648px; /* 匹配iPad屏幕实际显示宽度，自行微调 */
  height: 720px; /* 匹配iPad屏幕实际显示高度，自行微调 */
  overflow-y: auto; /* 内容超出时出现滚动条 */
  overflow-x: hidden;
}
/* 长截图只需要设置宽度和容器一致，高度自适应 */
.content { 
  display: block;
  width: 100%;
}

HTML #

<div class="nest">
  <img class="ipad" src="你的iPad边框地址">
  <div class="container">
    <img class="content" src="你的长截图地址">
  </div>
</div>

关键调整说明 #

• 给iPad边框加了pointer-events: none，滚动的时候不会被边框挡住操作，不会出现点了半天滚不动的情况
• 滚动只作用在和iPad屏幕区域匹配的.container上，边框固定不动，符合展示需求
• 长截图宽度和.container保持100%匹配，不会出现横向滚动条
• 所有尺寸可以根据你的iPad边框实际像素调整，只要container的位置和大小刚好卡在边框的屏幕区域就可以

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