이야기앱 세상

jQuery - div에 overflow:auto 로 지정했을 때 div의 하위 div로 스크롤 위치를 변경하기 본문

IT/jQuery

jQuery - div에 overflow:auto 로 지정했을 때 div의 하위 div로 스크롤 위치를 변경하기

storya 2019. 1. 2. 19:43
반응형

div에 overflow:auto 로 지정했을 때 div의 하위  div로 스크롤 위치를 변경하기


div에 스크롤이 생기고 div의 하위 div로 스크롤의 위치를 변경하게 하기 위해서 아래와 같이 우선 div에 overflow:auto 스타일을 적용한다.


[style 부분]


<style type="text/css">


    div#main{

    overflow:auto;

    width:150px;

    height:800px;

    }

    

    div#main div{

    width:100px;

    height:100px;

    border:1px solid black;

    }


    span{

 cursor: pointer;

 padding:10px;

     }

</style>


<script 부분>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$('span').click(function(){

                        //span 태그를 클릭하면 span 태그에 표시된 번호를 읽어와서 div의 id와 일치하면 해당 div에 접근해서 data-num 값을 읽어와서 scrollTop에 할당한다.

var span = $(this).text();

$('#main').animate({scrollTop:$('#'+span).attr('data-num'),duration:400});

});

});

</script>


<html 부분>


<div>

<span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span>

</div>

<div id="main">

        <!-- div의 높이가 100px이기 때문에 data-num의 값을 100씩 증가시켜서 명시한다. -->

<div id="1" data-num="0">1</div>

<div id="2" data-num="100">2</div>

<div id="3" data-num="200">3</div>

<div id="4" data-num="300">4</div>

<div id="5" data-num="400">5</div>

<div id="6" data-num="500">6</div>

<div id="7" data-num="600">7</div>

<div id="8" data-num="700">8</div>

<div id="9" data-num="800">9</div>

<div id="10" data-num="900">10</div>

<div id="11" data-num="1000">11</div>

<div id="12" data-num="1100">12</div>

</div>


[실행 화면]

3을 클릭하면 3번이라고 명시된 div로 스크롤이 옮겨짐



반응형
0 Comments
댓글쓰기 폼