jQuery : 가로 스크롤에 뷰포트에있는 요소를 말하십시오.

Question

세로 스크롤과 비슷한 문제에 대한 해답을 찾았습니다.

부모 div 내에 요소가 있습니다. 이러한 요소의 클래스는 같고 부모는 왼쪽과 오른쪽으로 스크롤 할 수 있습니다. 자녀 중 한 명만 완전히 볼 수 있습니다.

<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

#stickers 가정이 바로 CSS는 (. 그렇지 않으면, 당신의 스크롤 처리기 것이다 결코 화재)

오버 플로우 스크롤을해야한다 : 부모가 스크롤 할 때마다 나는 하나가 완전히 볼 수있는 말할 수 있어야합니다

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