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

Question

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

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

问题是；我希望能够 drag/scroll 围绕处于变换状态的整个图像，但是，我无法向上滚动或向左滚动到图像中心。

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

关于如何访问图像的 -y 和 -x space 同时保持 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">

Answer 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">

Answer 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,
  })
})

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

Scrolling into -y and -x of overflowed image

html

css

transform

overflow