.scrollLeft()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

scrollLeft 메소드는 좌우 스크롤 값을 읽어오거나 지정합니다.

+_+
예제 1
스크롤 값 읽어오기 그리고 지정하기
보기
아래 버튼을 마구 눌러보세요!


소스
<style type="text/css">
    .css_test {
        height : 400px;
        margin-top : 10px;
        margin : 0 auto;
        overflow : hidden;
        white-space : nowrap; /* 줄바꿈 금지(이미지를 한줄로) */
        width : 550px;
    }
</style>

아래 버튼을 마구 눌러보세요!<br>
<button type="button" onclick="j_test(-50)">왼쪽으로 스크롤</button>
<button type="button" onclick="j_test(50)">오른쪽으로 스크롤</button><br><br>
<div class="css_test">
    <img src="http://cfile28.uf.tistory.com/image/2730B94D55AC84A92FF2AD" />
    <img src="http://cfile22.uf.tistory.com/image/2264874654D5A16A326A6F" />
    <img src="http://cfile2.uf.tistory.com/image/2604833354D74FB40E65BC" />
    <img src="http://cfile23.uf.tistory.com/image/23285B4D55AC84AD335475" />
    <img src="http://cfile10.uf.tistory.com/image/2227B74F54D73516319C98" />
</div>

<script type="text/javascript">
    function j_test(n){
        $('.css_test').scrollLeft( $('.css_test').scrollLeft() + n );
    }
</script>
관련 CSS
jQuery

$( 셀렉터 ).scrollLeft()  -  셀렉터에 해당하는 요소의 가로스크롤 값을 읽어옵니다.
$( 셀렉터 ).scrollLeft( )  -  셀렉터에 해당하는 요소의 가로스크롤 값을 지정합니다.

$( '.css_test' ).scrollLeft( $( '.css_test' ).scrollLeft() + 10 )  -  값을 읽어온 후 +10 계산하여 다시 지정하기
이렇게 하면 +10px 만큼 스크롤 됩니다.

※ 좀더 우아한(?) 스크롤 기법은 화면스크롤 애니메이션을 참고해 주세요 ^^

+ 관련 jQuery +
jQuery 홈페이지 .scrollLeft() API 문서 : https://api.jquery.com/scrollLeft/