滚动到溢出图像的 -y 和 -x答案

【问题标题】：Scrolling into -y and -x of overflowed image滚动到溢出图像的 -y 和 -x
【发布时间】：2021-08-23 15:37:46
【问题描述】：

当我将鼠标悬停在其上时，我的图像会缩放，多余的图像会被隐藏（参见示例代码）。

我希望图像从中心缩放，所以我使用transform-origin: 50% 50%

问题是；我希望能够在转换后的状态下拖动/滚动整个图像，但是我无法向上或向图像中心的左侧滚动。

如果我使用transform-origin: 0% 0%，我可以看到整个图像，但（显然）它不再从图像的中心转换。

关于如何访问图像的 -y 和 -x 空间同时将 transform-origin 保持在中心的任何建议？

/* 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);
  transform-origin: 50% 50%;
}

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

【问题讨论】：

标签： html css overflow transform

【解决方案1】：

您可以在悬停时将img 的height 和width 增加到您缩放2 倍的比例，因此height/width 的值增加到200%

/* 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);
  transform-origin: 50% 50%;
  width:200%;
  height:200%;
}

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

【讨论】：

谢谢你，但我仍然无法在缩放后的图像上向上或向左滚动。我希望能够在图像缩放后滚动到负空间。我试过使用scroll-margin，但也没有成功。

【解决方案2】：

我很幸运能找到解决此问题的人。我将与可能提出类似请求的任何人分享下面的代码。

我已将我的代码使用的名称替换为 myArray1 myArray2，如果这是不正确的术语，请有人纠正我。

const myArray1 = document.querySelector('#');
const myArray2 = document.querySelector('#');
let hovering = false;
myArray1.addEventListener('mousemove', () => {
  if (hovering) {
    return;
  }

  myArray2.style.zoom = '200%';
  myArray1.scrollTo({
    top: myArray1.scrollHeight / 4,
    left: myArray1.scrollWidth / 4,
  });

  hovering = true;
})

myArray1.addEventListener('mouseleave', () => {
  hovering = false;
  myArray2.style.zoom = '100%';
  myArray1.scrollTo({
    top: myArray1.scrollHeight / 4,
    left: myArray1.scrollWidth / 4,
  })
})

【讨论】：