javascript - 没有 jQuery 的滚动图片库

Question

我有一个滚动的图片库，如下所示。 CSS 将图像排成水平滚动的一行。在下面，我有一排相同的图像，但作为缩略图。我希望能够单击缩略图，然后将正确的图像滚动到 View 中。

HTML:

<div class="images_container">
  <img id="image_1" src="/image1.jpg">
  <img id="image_2" src="/image2.jpg">
  <img id="image_3" src="/image3.jpg">
</div>

<div class="images_container thumbnails">
  <a href="#image_1"><img src="/image1.jpg" class="thumbnail"></a>
  <a href="#image_2"><img src="/image2.jpg" class="thumbnail"></a>
  <a href="#image_3"><img src="/image3.jpg" class="thumbnail"></a>
</div>

CSS:

.images_container {
  overflow-x: scroll;
  overflow-y: hidden;
  max-height: 50rem;
  white-space: nowrap;
}

.images_container.thumbnails {
  max-height: 10rem;
}

.images_container img {
  vertical-align: top;
  height: 50rem;
}

.images_container.thumbnails img {
  height: 10rem;
}

这在一定程度上可行，但跳转到图像的 id 是有问题的。如果较大的图像距离可见视口(viewport)只有几个像素，它就无法“跳转”到它，因为它在技术上似乎在屏幕上。

当我点击相应的缩略图时，有没有一种方法可以使用 Javascript 将整个图像“滚动”到 View 中？我无法在这个元素中使用 jQuery，但很高兴使用 JavaScript 来完成这项工作。

Answer 1

你可以试试这个，CSS 没有变化，我在 html 中添加一个 id 并调用 scrollTo 函数:

<script>

    function scrollTo(image_id){
        var topLeft = document.getElementById(image_id).offsetTop;
        document.getElementById('container').scrollLeft = topLeft;
    }


</script>
<div id="container" class="images_container">
  <img id="image_1" src="/image1.jpg" height="500px" width="500px">
  <img id="image_2" src="/image2.jpg"  height="500px" width="500px">
  <img id="image_3" src="/image3.jpg"  height="500px" width="500px">
</div>

<div class="images_container thumbnails">
  <a href="#image_1"><img src="/image1.jpg" class="thumbnail" onclick="scrollIntoView('image_1')"></a>
  <a href="#image_2"><img src="/image2.jpg" class="thumbnail" onclick="scrollIntoView('image_2')"></a>
  <a href="#image_3"><img src="/image3.jpg" class="thumbnail" onclick="scrollIntoView('image_3')"></a>
</div>