I only found answers for similar problems with vertical scrolling.
I have elements within a parent div, these elements have the same class and their parent is scrollable left and right. Only one of its children can be fully visible. I want to be able to tell which one is fully visible whenever the parent is scrolled :
<div id="stickers">
<div id="sticker-1" class="sticker"><img src="http://via.placeholder.com/320x200"></div>
<div id="sticker-2" class="sticker"><img src="http://via.placeholder.com/320x200"></div>
[...]
<div id="sticker-8" class="sticker"><img src="http://via.placeholder.com/320x200"></div>
</div>
<script>
var scrollingIsThrottled = false;
var sticker = $(".sticker");
var window = $(window);
$('#stickers').scroll(function() {
if (!scrollingIsThrottled) {
scrollingIsThrottled = true;
var StickerMatchingExpression = sticker.filter(function() {
var $this = $(this);
var left_of_element = $this.offset().left;
var right_of_element = $this.offset().right;
var bottomof = $('#stickers').height;
var topof = $('#stickers').width;
return ((bottomof > left_of_element) && (topof < right_of_element));
});
scrollingIsThrottled = false;
}
});
</script>