스크롤 위치 설정, 스크롤 자동으로 움직이기

스크롤 위치 설정하기

$(대상).scrollLeft(위치값)
$(대상).scrollTop(위치값)

 

스크롤 위치를 설정할때도 스크롤 위치값을 구할때와 마찬가지로 scrollLeft() / scrollTio() 메서드를 사용한다.

 

버튼을 클릭하면 스크롤 끝까지 자동으로 이동시키기

<script>
    $(document).ready(function(){
        var $info = $("#info");
        var $con = $("#container");
        var scrollEnd = $con.find("img").width() - $con.width();
        //스크롤 끝 지점 구하기 : 스크롤 안에 내용 width에서 컨테이너 widht(현재 보여지는 영역)만큼 빼준다.

        $(btn).click(function(){
            var left = $con.scrollLeft();
            var count = 0;

            var timerID = setInterval(function(){
                left+=5;
                $info.html(count + ". " + left)
                $con.scrollLeft(left);
                if(left > scrollEnd){
                    clearInterval(timerID);
                }
                count++;
            },100)

        })
    })  
</script>

<div class="nav">
    <button id="btn">확인</button>
    <div id="info"> 여기에 스크롤 정보가 출력될 거에요.</div>
</div>
<div id="container" >
    <img src="sample.png">     
</div>