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

Question

I have a parent with a horizontal overflow. I want the position of the children (and sub children) based on the (touch) scroll position relative to the left. Every JS function I tried returns fixed positions.

<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; }

In this example, how to know when child-two enters the viewport on the right? PS. 50vw is just an example, it's never at half the width of the parent:)

Answer 1

You need to look at the scrollLeft property ( https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft )

Basically, you will need to look at the absolute left of the child element (relative to the parent), subtract the width of the parent, and then if the scrollLeft property of the parent is larger than the difference, the child element will have scrolled into the visible range (and then you need to make sure it hasn't scrolled off the left as well)