집 > 기사 > 웹 프론트엔드 > jQuery 사용자 정의 스크롤 bar_jquery의 전체 예

jQuery 사용자 정의 스크롤 bar_jquery의 전체 예

WBOY원래의: 2016-05-16 15:21:041151검색

이 기사의 예에서는 jQuery 사용자 정의 스크롤 막대의 구현 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

미적인 고려 사항으로 인해 다양한 스크롤바를 맞춤 설정해야 하는 경우가 많습니다. 그래서 데모를 만들었습니다

런닝 효과 스크린샷은 다음과 같습니다.

코드 부분은 다음과 같습니다.

<html>
  <head>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script>
    $(function(){
      //内容高度
      var content = $("#div2"); 
      //框的高度
      var box = $("#div1");
      //自定义的滚动条
      var scrollbar = $("#div3");
      var scroll=function(content,box,scrollbar){
        var bigHeight = content.height();
        var smallHeight = box.height();
        var rate = smallHeight/bigHeight;
        var h = Math.floor(rate*smallHeight);
        scrollbar.height(h);
        var offset = box.offset()
        var offsetT = offset.top+1;
        scrollbar.mousedown(function(e){
          var divOffsetT = scrollbar.offset().top;
          var tempT = e.pageY-divOffsetT;
          function move(e){
            var newH = e.pageY-tempT-offsetT;
            if(newH<0){
              newH=0;
            }else if(newH>(smallHeight-h)){
              newH=smallHeight-h;
            }
            var rate2 = (newH+h)/smallHeight;
            var contentH = Math.floor(bigHeight*rate2-smallHeight);
            content.css("top",-contentH+"px");
            scrollbar.css("top",newH+"px");
          }
          $("body").on("mousemove",move);
          $("body").mouseup(function(){
            $("body").off("mousemove",move);
          });
        });
      }
      scroll(content,box,scrollbar);
    });
    </script>
    <style>
      *{ margin:0; padding: 0;}
      body{ font-size: 12px;}
      #div1{ width: 200px; height: 300px; margin: 50px auto; position: relative; _overflow: hidden; border: 1px solid #000;}
      #div2{ width: 180px; position: absolute; top: 0; left: 5px;}
      #div3{ width: 10px; position: absolute; top: 0; right:5px; background: #000;}
    </style>
  </head>
  <body>
    <div id="div1">
      <div id="div3"></div>
      <div id="div2">
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
      </div>
    </div>
    <textarea name="" id="txt" cols="30" rows="10"></textarea>
  </body>
</html>

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：javascript_javascript 기술의 등속운동 구현 방법 분석다음 기사：javascript_javascript 기술의 등속운동 구현 방법 분석

jQuery 사용자 정의 스크롤 bar_jquery의 전체 예

관련 기사