使元素在可滚动的div中居中

Question

我正在制作某种日历的时间线，在每日视图上，有一个垂直滚动和一条红线指示当前时间。请以这个jsbin为例https://jsbin.com/pazufivige/edit?html,output

​

<div style="width: 500px; overflow: scroll">
    <div style="width: 5000px; height: 100px; background-color:grey;position: relative;">
        <div style="position: absolute; height: 100%; width: 2px; background-color: #EF5350; z-index: 5; left: 8%";></div>
    </div>
</div>

​

我想让红线保持在div的中心，所以我想让可滚动的div滚动到正确的位置，这样它就会留在中间。红线每分钟更新一次，并且处于计划的顶端，所以我必须每分钟计算一次滚动位置。我该怎么做呢？我在谷歌上搜索了很多，但找不到与我的问题类似的东西，有人能把我推向正确的方向吗？

Answer 1

你必须找到你的“红线”的位置，并滚动窗口，使窗口左侧红线的位置是你窗口宽度的一半。

要遵循的简单步骤: 1.从窗口左侧找到线条的相对位置。2.找到窗口的宽度。3.使用scrollLeft方法滚动，使红线左侧的宽度与红线右侧的宽度相同。

​

$(document).ready(function(){
width = $("#myWindow").width();
linePosition = $("#redLine").position().left;
console.log(linePosition);
let scroll= linePosition - (width/2);
console.log(scroll)
$("#myWindow").scrollLeft(scroll);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myWindow" style="width: 500px; overflow-x: scroll">
    <div style="width: 5000px; height: 100px; background-color:grey;position: relative;">
        <div id="redLine" style="position: absolute; height: 100%; width: 2px; background-color: #EF5350; z-index: 5; left: 45%";></div>
    </div>
</div>

​