javascript - 如何根据高度平移图像？

Question

我有一张高大的图片，它在一个不那么高的 div 中。我想通过翻译来展示整个图像。这是我到目前为止所拥有的:

https://jsfiddle.net/swv0w0em/

 document.addEventListener("mouseover", function(event) {
   var element = event.target;
   if (element.classList.contains("myImage") &&
     element.naturalWidth < element.naturalHeight) {
     element.className += " imageScroll";


     //element.style.transform = "translate(0,-" + element.naturalHeight + ")";
     //element.style.mozTransition = "translate(0,-" + element.naturalHeight + ")";
     //element.style.msTransform = "translate(0,-" + element.naturalHeight + ")";
     //element.style.oTransform = "translate(0,-" + element.naturalHeight + ")";
     //element.style.webkitTransform = "translate(0,-" + element.naturalHeight + ")";
   }
 });
 document.addEventListener("mouseout", function(event) {
   var element = event.target;
   if (element.classList.contains("myImage")) {
     element.className = element.className.replace(
       /(?:^|\s)imageScroll(?!\S)/g, ''
     );
   }
 });

div {
  height: 200px;
  overflow: hidden;
  background-color: red;
}
img {
  -moz-transition: all 3s ease-in-out;
  -o-transition: all 3s ease-in-out;
  -webkit-transition: all 3s ease-in-out;
  transition: all 3s ease-in-out;
}
.imageScroll {
  -moz-transform: translate(0, -350px);
  -ms-transform: translate(0, -350px);
  -o-transform: translate(0, -350px);
  -webkit-transform: translate(0, -350px);
  transform: translate(0, -350px);
}

<div>
  <img src="https://placeimg.com/300/800/any" class="myImage" alt="SomeImage">
</div>

但是，我不知道如何用图像高度进行平移。我希望在看到图像底部时立即停止滚动。我不知道图像之前会有多高，所以我不能在 CSS 中对其进行硬编码。这就是为什么我尝试在 JavaScript 中设置样式，但这对我不起作用(请参阅注释掉的代码)。

我的问题:如何让图像在鼠标悬停时一直向下滚动，并在到达图像底部时停止滚动？我也不能滚动超过高度，否则我会得到难看的空白。我正在尝试用纯 JavaScript 完成这项工作，没有 jQuery。谁能帮忙？

Answer 1

使用纯 CSS，您可以在翻译中使用百分比单位，然后使用顶部偏移量(绝对位置)减去容器的高度:

div {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.myImage {
  transition: all 3s ease-in-out;
  display: block;
  position: absolute;
  top: 0; left: 0;
}

.myImage:hover {
  top: 100%;
  transform: translateY(-100%);
}

<div>
  <img src="https://placeimg.com/300/800/any" class="myImage" alt="SomeImage">
</div>

jsFiddle:https://jsfiddle.net/azizn/h37dLzgf/1/