jquery - 如何在悬停时滚动到图像的底部

Question

您好，我只是想知道在悬停时能够滚动到图像底部的最佳方法。该图像位于一个包装器中，由于它很长，因此应用了溢出隐藏。理想情况下，平滑滚动到底部是我正在寻找的查看隐藏图像其余部分的方法。

我一直在玩弄 jquery 试图让它工作，但我陷入了困惑。不确定我的代码是否走在正确的轨道上。

感谢任何帮助

$('#image-wrap img').on('hover', function() {
  var target = $(this),
    height = target.height(),
    scrollHeight = target.prop('scrollHeight');

  target.animate({
    scrollTop: scrollHeight - height
  }, 2000);
});

#main-wrapper {
  width: 600px;
  margin: 0 auto;
}

#box-wrapper {
  position: relative;
}

#box {
  width: 100%;
  height: 400px;
  border: 1px black solid;
  position: relative;
}

#image-wrap {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

#image-wrap img {
  position: absolute;
  top: 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-wrapper">
  <div id="box-wrapper">
    <div id="box">
      <div id="image-wrap">
        <img src="http://via.placeholder.com/600x2000" />
      </div>
    </div>
  </div>
</div>

Answer 1

您可以简单地使用 CSS3。在悬停时添加转换 transform: translateY(-100%)，但它不像 jquery 解决方案那样聪明。

#main-wrapper {
  width: 600px;
  margin: 0 auto;
}

#box-wrapper {
  position: relative;
}

#box {
  width: 100%;
  height: 400px;
  border: 1px black solid;
  overflow: hidden;
}

img {
    transition: all 2000ms ease-out;
}

#box:hover img {
    transform: translateY(-100%);
}

<div id="main-wrapper">
  <div id="box-wrapper">
    <div id="box">
        <img src="http://lorempixel.com/400/1000/sports/" />
    </div>
  </div>
</div>