괴발개발/Javascript+JQuery

JQ_스크롤( scroll(), scrollTop(),scrollLeft() )

moonday 2021. 6. 24. 22:34

스크롤을 움직일때 콘솔에 스크롤 위치가 찍히는 중

- scroll() : 요소에 마우스 스크롤을 할 떄 발생하는 이벤트
- scrollTop() : y축 방향으로 스크롤의 위치
- scrollLeft() : x축 방향으로 스크롤의 위치 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>스크롤 예제</title>
  <script src="../JS/jquery.min.js"></script>
  <script>
    $(function(){
      $('div').scroll(function(){
        printScroll();
      })
    })
    function printScroll(){
      console.log($('div').scrollTop());
      console.log($('div').scrollLeft());

    }
  </script>
</head>
<body>
  <div style="width: 200px; height: 100px; overflow: scroll;">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</body>
</html>

'괴발개발 > Javascript+JQuery' 카테고리의 다른 글

JQ_롤링(좌우버튼달기)  (0) 2021.06.25
JQ_롤링기능(rolling_가로,세로,역방향)  (1) 2021.06.24
JQ_detach()  (0) 2021.06.24
JQ_질문등록창(+서브질문등록)  (1) 2021.06.24
JQ_필터(탐색)  (0) 2021.06.23