获取子元素相对于侧视口的位置



我有一个水平溢出的父级。我想要基于相对于左侧的(触摸(滚动位置的子对象(和子对象(的位置。我尝试过的每个JS函数都返回固定的位置。

<div class="parent"> <div class="child-one"></div> <div class="child-two"></div> </div>

.parent { overflow-x: scroll; overflow-y: hidden; width: 100vw; } .child-one, .child-two { width: 50vw; }

在本例中,如何知道第二个孩子何时进入右侧视口?PS.50vw只是一个例子,它从来没有达到父对象宽度的一半:(

您需要查看scrollLeft属性(https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft)

基本上,您需要查看子元素的绝对左边(相对于父元素(,减去父元素的宽度,然后如果父元素的scrollLeft属性大于差值,则子元素将滚动到可见范围(然后您需要确保它也没有从左边滚动(

最新更新