jQuery：水平スクロールでどの要素がビューポートにあるかを教えてください

Question

私は、垂直スクロールで同様の問題の答えしか見つけませんでした。

私は親div内に要素を持ちます。これらの要素は同じクラスを持ち、その親は左右にスクロール可能です。子どもの1人だけが完全に見えることができます。私は親がスクロールされるたびに完全に表示されている1伝えることができるようにしたい：

#stickersがオーバーフロースクロールを作るために右CSSを持っていると仮定すると、

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

Answer 1

（そうでない場合は、お使いのスクロールハンドラが起動することはありません。）

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