1

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>
Nolan.K
  • 185
  • 2
  • 18
  • Have you tried modifying the vertical scroller code to use `scrollLeft`, `offsetLeft`, `left`, `width` etc. instead of `scrollTop`, `offsetTop`, `top` and `height`? Can you share the code? – searlea Nov 07 '17 at 08:24
  • Updated for you but there's really nothing working now for it. I do not find it easy to simply change a vertical scrolling thingy into horizontal. When it worked it just gave me every div, no matter if they were visible or not. – Nolan.K Nov 07 '17 at 08:36
  • You're missing brackets after `$('#stickers').height` (and `width`) - they're methods, not properties. i.e. it should be `$('#stickers').height()`. Also: the object returned by `offset()` doesn't have a `right` property. – searlea Nov 07 '17 at 08:41
  • Well that's not my problem actually as it's not working anyway. – Nolan.K Nov 07 '17 at 09:20
  • There is **no** difference between vertical scroll and horizontal. – vsync Nov 07 '17 at 09:43
  • Here is your answer: https://stackoverflow.com/a/45618188/104380 – vsync Nov 07 '17 at 09:43

1 Answers1

0

Assuming #stickers has the right CSS to make overflow scroll (if not, your scroll handler will never fire.)

var scrollingIsThrottled = false;
var sticker = $(".sticker");
$("#stickers").scroll(function() {
  var stickers_width = $(this).width();
  if (!scrollingIsThrottled) {
    scrollingIsThrottled = true;

    var StickerMatchingExpression = sticker.filter(function() {
      var $this = $(this);
      var left_of_element = $this.offset().left;
      var right_of_element = left_of_element + $this.width();
      return 0 <= left_of_element && right_of_element <= stickers_width;
    });
    scrollingIsThrottled = false;
  }
});
searlea
  • 8,173
  • 4
  • 34
  • 37