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

Question

我有一个水平溢出的父母。我想要基于（触摸）滚动位置相对于左侧的子级（和子级子级）的位置。我尝试的每个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只是一个例子，它永远不会是父级宽度的一半：）

Answer 1

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

基本上，您需要查看子元素的绝对左侧（相对于父元素），减去父元素的宽度，然后，如果父元素的scrollLeft属性大于差异，则子元素将会滚动到可见范围内（然后您需要确保它也没有滚动到左侧）