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滚动到正确的位置，以便它位于中间。红线每分钟更新一次，并且位于计划的顶部，因此我必须每分钟计算一次滚动位置。我将如何处理？我已经在Google上搜索了很多，但找不到与我的问题类似的东西，有人可以向正确的方向推动我吗？

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>

使元素在可滚动div中居中

1 个答案: