div가 뷰포트의 왼쪽에있을 때 jQuery 토글 클래스

jQuery에 관한 작은 문제가 있습니다. 가로 스크롤 레이아웃으로 웹 사이트를 만들려고합니다. 이 레이아웃을 사용하면 요소가 뷰포트의 왼쪽에있을 때 클래스를 전환 할 수 있는지 궁금합니다. 이 div가 화면의 왼쪽에 있고 뷰포트에 의해 숨겨지면 이전 크기로 돌아갈 때 div를 더 크게하고 싶습니다. 거의 iTunes가 슬라이드 효과를 커버합니다. http://www.jqueryrain.com/demo/jquery-coverflow/. ScrollTop을 사용하는 수직 스크롤과 jQuery와의 오프셋 기능을 사용하는 것이 가능하다는 것을 알고 있지만 가로 스크롤을 사용하여이를 수행하는 방법을 찾지 못했습니다.div가 뷰포트의 왼쪽에있을 때 jQuery 토글 클래스

여기에 누군가가 내가 아주 감사하게 될 것입니다 나를 도울 수 있다면 여기 여기 jsfiddle http://jsfiddle.net/x8x8z76a/

CSS를

html { 
    height:100%; 
} 

body { 
    height:100%; 
    overflow-x:scroll; 
    overflow-y:hidden; 
    width: auto; 
} 

#wrap { 
} 

div { 
    width:150px; 
    height:150px; 
    border:1px solid black; 
    display:inline-block; 
    white-space:nowrap; 
}

되고 HTML

<div id="wrap"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
    <div>6</div> 
    <div>7</div> 
    <div>8</div> 
    <div>9</div> 
</div>

입니다. 고마워요.

출처

2014-12-29 Bruno Landowski

scrollTop에서 가능하다는 것을 알고 있다면 필요한 것은 [scrollLeft] (http://api.jquery.com/scrollleft/)와 같은 것이 있다는 것입니다. –

오케이, 오해 하셔서 미안하지만 실제로 레이아웃에 적용하는 법을 모르겠습니다. div로 스크롤하는 방법을 알고 있지만 div로 스크롤 할 때 함수를 실행하는 방법을 모르겠습니다. 당신이 나를 도울 수 ? –

여기에 작은 FIDDLE을 만들었습니다.

탐지 정확도를 추가/제거하려면 nearOffsetPixels을 쉽게 수정할 수 있습니다.

JS :

var lastScrollLeft = 0; 
var divOffsetRight = $('#9').offset().left + $('#9').width(); 
var nearOffsetPixels = 5; 
$(window).scroll(function() { 
    var documentScrollLeft = $(document).scrollLeft(); 
    var documentScrollRight; 
    if (lastScrollLeft != documentScrollLeft) { 
     lastScrollLeft = documentScrollLeft; 
     documentScrollRight = documentScrollLeft + $(window).innerWidth(); 
     if((documentScrollRight > divOffsetRight - nearOffsetPixels) && 
      (documentScrollRight < divOffsetRight + nearOffsetPixels)) alert('reached'); 
    } 
});

는 작동 희망!

출처

2014-12-30 07:11:13 Sdghasemi

나를 도와 주셔서 감사합니다. –

div가 뷰포트의 왼쪽에있을 때 jQuery 토글 클래스

답변

관련 문제