JS实现图片点击缩放时隐藏放大副本导致body宽高异常如何解决

布局被撑坏的核心逻辑很明确：

• clip-path 只做视觉裁剪，不会改变元素本身的布局尺寸，也不会限制元素的溢出范围被计入页面可滚动区域
• 你克隆出来的放大图设置了position: absolute，但它的父级节点全是默认的static定位，没有任何overflow: hidden的约束，导致这张大尺寸克隆图直接相对于根元素定位，自身的宽高直接被算进了body的尺寸里
• 哪怕你用circle(0px)把克隆图裁到完全不可见，元素的溢出范围依然存在，就会挤出来横向滚动条，把右侧菜单的宽度挤变形。

另外你贴的CSS有个额外问题：把.image-zoom-available（也就是原图）设成了position: absolute，会导致原图脱离文档流、父容器高度塌陷，也会干扰正常布局。

方案1：最小改动，不影响现有逻辑 #

不需要调整坐标计算和动画逻辑，只需要加几行代码控制克隆图的可见性即可：

1. 在构造函数初始化克隆图样式的位置，加一行默认隐藏的设置，visibility: hidden的元素不会触发滚动条、不会撑大容器，同时元素的尺寸、位置计算完全正常，不影响后续渲染：

// 原有样式设置
this.imageZoom.style.zIndex = 1;
this.imageZoom.style.pointerEvents = "none";
this.imageZoom.style.position = "absolute";
// 新增：默认隐藏克隆图，不参与页面溢出计算
this.imageZoom.style.visibility = "hidden";

2. 在maskSizer方法里加两行状态控制，开始放大时显示、完全关闭时隐藏：

maskSizer() {
  this.maskSize = this.isExpanding ? this.maskSize + 35 : this.maskSize - 40;

  if (this.maskSize >= settings.maskSize) {
    this.maskSize = settings.maskSize;
    this.isActive = true;
  } else if (this.maskSize < 0) {
    this.maskSize = 0;
    this.isActive = false;
    this.image.classList.remove('is-active');
    // 新增：放大完全关闭后隐藏克隆图
    this.imageZoom.style.visibility = "hidden";
  } else {
    // 新增：开始放大动画时显示克隆图
    this.imageZoom.style.visibility = "visible";
    requestAnimationFrame(this.maskSizer.bind(this));
  }
  this.drawMask();
}

3. 记得把CSS里给原图.image-zoom-available加的position: absolute样式删掉，绝对定位只需要加在克隆出来的放大图上即可，原图要留在正常文档流里撑父容器高度。

方案2：布局层面彻底隔离 #

如果不想做显隐控制，可以直接把放大图的溢出范围限制在原图的父容器内，从根源上避免它影响外层布局：

1. 给原图的直接父容器加专属类，设置相对定位和溢出隐藏：

<div class="mb-3 img-zoom-container">
  <img class="image-zoom-available" style="height:75%; border-radius: 30px" src='{{ asset('/radio/') }}{{examen.idpatient.id}}_examen_{{examen.id}}_radio.png' id="image_radio" draggable="false" />
</div>

对应CSS：

.img-zoom-container {
  position: relative;
  overflow: hidden;
}

2. 加完之后克隆出来的绝对定位放大图会相对于这个父容器定位，所有超出父容器范围的内容都会被直接裁剪，不管克隆图尺寸多大，都不会溢出到外层影响body宽高计算。

注意：用这个方案需要微调drawMask方法里的坐标计算，因为克隆图的定位上下文从根元素变成了父容器，原来计算偏移时减去的window.scrollX/window.scrollY要替换成父容器的对应偏移量。

内容的提问来源于stack exchange，提问作者Hugo Le Bihan