javaScript中自定义滚动条二

最新推荐文章于 2025-08-15 22:56:20 发布

p是马甲

最新推荐文章于 2025-08-15 22:56:20 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/mc67/p/5209832.html

本文介绍了一种在JavaScript中实现自定义滚动条的方法，并通过HTML和CSS代码演示了其应用，包括如何通过键盘控制滚动条移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javaScript中自定义滚动条二

完整代码：（代码只是面向功能，后期有待优化，一写细节的完善）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
 #parent{
      height:30px;
      width:400px;
      background:#ccc;
      position:relative; 
  }
  #son{
      height:30px;
      width:30px;
      background:red;
      position:absolute;
      cursor:pointer;
      
  }
  #demo{
      height:150px;
      width:400px;
      background:green; 
      position:relative;
      overflow:hidden;
  }
  #content{
      position:absolute;
  }
  
</style>
</head>

<body>  
  <div id="parent">
      <div id="son">
      </div>
  </div>
  <div id="demo">
    <div id="content">
       测试数据测试数据测试数据测试数据<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 />
         测试数据测试数据测试数据测over<br />
 
    </div>
  </div>
</body>
<script type="text/javascript">
  //接下来，我们就来做这个滚动条的效果滴呀；
  window.onload=function (){
      var parent=document.getElementById("parent");
      var son=document.getElementById("son");
      var demo=document.getElementById("demo");
      var content=document.getElementById("content");
      
      //同样，我们可以通过键盘来控制滑块的移动滴呀
      son.onmousedown=function (ev){
          //这里我们只是拖动x上的改变；
          var e=ev || event;
          var relativeX=e.clientX-son.offsetLeft;
      document.onmousemove=function (ev){
          var e=ev || event;
          var x=e.clientX-relativeX;
        //  var y=e.clientY-relativeY;
          //限制范围了；这里来显示他们的边界滴 呀
          if(x<0){
              x=0;
          }else if(x>(parent.offsetWidth-son.offsetWidth)){
            x=parent.offsetWidth-son.offsetWidth;
          }
          son.style.left=x+'px';
          var percent=Math.Round(parentFloat(x/(parent.offsetWidth-son.offsetWidth)));
          document.title=percent;
          //demo 150
          //content 600
          //这样一计算就分成了四份；
          content.style.top=-((content.offsetHeight-demo.offsetHeight)*percent)+'px';
          
      }
      document.onmouseup=function (){
         document.onmousemove=null;
         document.onmouseup=null;
         if(son.setCaptrue!=undefined){
          son.releaseCaptrue();
      }
      }
      //当然也要考虑到我们避免“选择文字的”bug
      if(son.setCaptrue!=undefined){
          son.setCaptrue();
      }
      return false;
      
    }
  }
</script>
</html>