Home>

most of the time,Due to aesthetic considerations,Often need to customize various scroll bars,So I made a demo

The screenshot of the running effect is as follows:

Here is the code part:

<html>
  <head>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script>
    $(function () {
      //content height
      var content=$("#div2");
      //the height of the box
      var box=$("#div1");
      //Custom scroll bar
      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>
      <div></div>
      <div>
        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="" cols="30" rows="10"<&/;textarea>
  </body>
</html>
  • Previous Example analysis using Java to achieve the basic audio player writing points
  • Next Analysis of List () Function Usage in PHP