0

I have something like a carousel with elements inside of a container with overflow: hidden

enter image description here

I can scroll left and right and I want to determine which elements are not visible at all or only half is visible (like on this picture) and when add to this invisible and half visible elements a class.

Width of each element is for example 100px but width of container depends on screen size. I can get number of elements which are visible (by dividing offsetWidth of container by width of one element)

Alse I know that there is such thing as getBoundingClientRect() but not sure how to use it in this case.

example

Here you can see how I try to implement getBoundingClientRect but I can't figure out which elements to target. I want to add class to the div which is partially seen (4th) and if on the first click part of the first div would be seen - to it too.

Kira
  • 1,677
  • 4
  • 21
  • 42
  • Look at the answer with getBoundingClientRect() on this answer https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport and comment back here if that's what you needed. -- In that case we'll want to close this question as a duplicate – JasonB Jan 09 '18 at 17:57
  • @JasonB It kind of does but the problem is I can't get it work right if I use button click to scroll - as it adds class to anelement which is already visible. – Kira Jan 09 '18 at 18:18
  • Well then at this point you should modify your question to include a minimal working version of the code and describe how to reproduce that unwanted behavior. Then we'll be able see what you're seeing and hopefully help you out. – JasonB Jan 09 '18 at 18:21
  • @JasonB updated – Kira Jan 09 '18 at 19:02

0 Answers0