javascript - 更改其子项的位置后，HTML 容器无法正确滚动

Question

要了解我的问题，您可以查看我创建的 jsfiddle。

https://jsfiddle.net/hxzLeL6x/2/

当您点击第二张图片时，包含两张图片的灰色容器向左滑动，直到第二张图片位于其父图片的最左侧。

如您所见，父项在其子项移动后无法正确滚动。

我该如何解决这个问题？

下面是HTML代码

<div id="tapeContainer">
    <div id="tape">
       <img id="firstImage" src="http://www.fotosd.it/wp-content/uploads/paesaggio-montano-della-val-di-fassa-in-estate_imagelarge.jpg">

       <img id="secondImage" src="http://www.improntaunika.it/wp-content/uploads/2014/01/paesaggio20toscano.jpg">
    </div>
</div>

这里是css代码

#tapeContainer{
  overflow: scroll;
  width:600px;
}

#tape{
  background-color: #616161;
  position: relative;
  height: 50px;
  width:3000px;
}

img{
  width:50px;
  height:50px;
}

最后是javascript代码

document.getElementById("secondImage").addEventListener("click", onImageClick.bind(null));


function onImageClick(e) {
            var clickedImage = e.currentTarget;
            var displacement = 0;


            var targetPosition = document.getElementById("tapeContainer").getBoundingClientRect().left;
            var tape = document.getElementById("tape");
            move();


            function move() {
                displacement += 1;
                tape.style.setProperty("right", displacement + "px");

                if(clickedImage.getBoundingClientRect().left !== targetPosition)
                {
                    setTimeout(move, 1);
                }
            }
}

Answer 1

我相信这会以更简单的方式为您提供所需的功能:

function onImageClick(e) {
    var clickedImage = e.currentTarget;        
    var tapeContainer = document.getElementById("tapeContainer");
    tapeContainer.scrollLeft = clickedImage.offsetLeft;
}

https://jsfiddle.net/hxzLeL6x/3/

如果你想保留动画你可以使用这个代码:

function onImageClick(e) {
    var clickedImage = e.currentTarget;        
    var tapeContainer = document.getElementById("tapeContainer");
    var goal = clickedImage.offsetLeft;
    move();

    function move() {
        if(tapeContainer.scrollLeft < goal) {
            tapeContainer.scrollLeft += 1;
        }

        if(tapeContainer.scrollLeft > goal) {
            tapeContainer.scrollLeft -= 1;
        }

        if(Math.round(tapeContainer.scrollLeft) != goal) {
            setTimeout(move, 1);
        }
    }
}

http://jsfiddle.net/hxzLeL6x/14/