如何保持transform-origin居中时访问缩放溢出图片的负x、负y区域

核心原因 #

CSS transform仅做视觉渲染，不会修改元素的原始布局占位。以中心为原点放大2倍时，图片会向左、向上各溢出自身原始尺寸的1/2，这部分内容处于容器的负坐标区间，浏览器滚动条默认仅支持正坐标内容的滚动，因此无法访问左上区域。

解决方案 #

方案1：transform追加偏移补正（最轻量改动） #

在hover的transform规则中同步添加translate(50%, 50%)，刚好抵消中心缩放带来的负坐标溢出，视觉上仍保持中心放大的效果，完全符合业务需求。
修改后的CSS代码如下：

/* Map Image
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
#MapBase {
  position: relative;
  left: 100px;
  width: 100%;
  height: auto;
  max-width: 450px;
  max-height: 550px;
  z-index: 1;
  visibility: visible;
  overflow: scroll;
}

#MapBase img {
  display: block;
  transition: transform .6s;
}
#MapBase:hover img {
  transform: scale(2) translate(50%, 50%);
  transform-origin: 50% 50%;
}

如果缩放比例不固定，通用偏移计算公式为：translate( (缩放倍数 - 1) * 50%, (缩放倍数 - 1) * 50% )，比如缩放3倍时替换为translate(100%, 100%)即可。

方案2：外层容器修正布局（适配动态缩放） #

如果不想修改transform规则，可新增一层图片包裹容器，通过容器撑开正坐标范围内的滚动区域，完全保留原有的中心缩放逻辑：

<div id="MapBase" class="map-container map-base dragscroll">
  <div class="img-wrapper">
    <img src="https://via.placeholder.com/450x550" class="map">
  </div>
</div>

#MapBase .img-wrapper {
  /* 按2倍缩放设置容器最小尺寸，动态缩放可通过JS修改该值 */
  min-width: 900px;
  min-height: 1100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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