你的位置:首页 > Java教程

[Java教程]利用JS实现自定义滚动条


一般默认的滚动条会比较丑,我们可以用简单的js实现自定义滚动条的功能;

代码如下:

<!doctype html><html><head><meta charset="utf-8"><title>标题</title><meta name="keywords" content=""><meta name="description" content=""><style>  *{margin:0; padding:0; list-style:none;}  body{    height:2000px;  }  .box1{    width: 320px;    height: 400px;    background: #ccc;    overflow: hidden;    overflow-y: scroll;    margin: 20px 0 0 100px;  }  .con1{    font-size: 18px;  }  #out{    width: 320px;    height: 400px;    background: url(bg1.png) 0 0 repeat-x;    position: absolute;    left: 500px;    top: 20px;    overflow: hidden;  }  #con{    width: 280px;    padding: 5px;    font-size: 18px;    position: absolute;    left: 0px;    top: 0px;  }  #box{    width: 30px;    height: 400px;    position: absolute;    right: 0;    top: 0;  }  #drag{    width: 30px;    height: 53px;    background: url(icon2.png) 0 0 no-repeat;    position: absolute;    left: 0px;    top: 0px;  }</style></head><body><div class="box1">  <p class="con1">据新华社电中航工业、国机集团等8家央企6日在京签约,在重要项目、科技转化等相关领域开展重组合作整合,这将成为央企间产业联合协作的新典范,也将开启央企间产业重组合作整合的新阶段。相关合作内容包括:中航工业和国机集团共同发展八万吨模锻压机项目;中航工业将房地产业务全部划转保利集团,中核建设和中国一重在高温气冷堆主设备制造领域合作,兵器工业、兵器装备、中国国新对北方公司进行股权重组。国务院国资委主任肖亚庆在6日参加中央企业产业合作座谈会上表示,下一步,国资委政策将加码推动央企产业重组步伐,通过业务整合、资产重组、股权合作、资产置换、无偿划转、协议转让、战略联盟、联合开发等多途径,加快央企间产业重组合作整合。肖亚庆同时清晰地勾勒出国企改革兼并重组“路线图”:通过产业重组,在突破关键技术、掌握核心资源,打造知名品牌等方面,实现产业重组合作“一加一大于二”的效果。肖亚庆同时透露,目前部分央企在牵头技术创新战略联盟、设立创新投资基金、构建创新孵化平台等方面,取得了重大突破。据统计,央企牵头国家及地方技术创新联盟141个,50多家中央企业共发起和参与基金179只,构建面向社会的创新孵化平台57个,创业创新平台27个。“此次集中签约,意味着央企重组的重心开始向资本、项目、产业板块等内部要素转移。”中国企业研究院首席研究员李锦说,未来,央企间产业重组合作整合将被更快地推进,央企内部的各种要素将被再次优化。</p></div><div id="out">  <div id="con">据新华社电中航工业、国机集团等8家央企6日在京签约,在重要项目、科技转化等相关领域开展重组合作整合,这将成为央企间产业联合协作的新典范,也将开启央企间产业重组合作整合的新阶段。相关合作内容包括:中航工业和国机集团共同发展八万吨模锻压机项目;中航工业将房地产业务全部划转保利集团,中核建设和中国一重在高温气冷堆主设备制造领域合作,兵器工业、兵器装备、中国国新对北方公司进行股权重组。国务院国资委主任肖亚庆在6日参加中央企业产业合作座谈会上表示,下一步,国资委政策将加码推动央企产业重组步伐,通过业务整合、资产重组、股权合作、资产置换、无偿划转、协议转让、战略联盟、联合开发等多途径,加快央企间产业重组合作整合。肖亚庆同时清晰地勾勒出国企改革兼并重组“路线图”:通过产业重组,在突破关键技术、掌握核心资源,打造知名品牌等方面,实现产业重组合作“一加一大于二”的效果。肖亚庆同时透露,目前部分央企在牵头技术创新战略联盟、设立创新投资基金、构建创新孵化平台等方面,取得了重大突破。据统计,央企牵头国家及地方技术创新联盟141个,50多家中央企业共发起和参与基金179只,构建面向社会的创新孵化平台57个,创业创新平台27个。“此次集中签约,意味着央企重组的重心开始向资本、项目、产业板块等内部要素转移。”中国企业研究院首席研究员李锦说,未来,央企间产业重组合作整合将被更快地推进,央企内部的各种要素将被再次优化。</div>  <div id="box">    <p id="drag"></p>  </div></div><script>  var out=document.getElementById('out');  var con=document.getElementById('con');  var box=document.getElementById('box');  var drag=document.getElementById('drag');  drag.onmousedown=function (ev){    var e=ev||window.event;    if (e.preventDefault) {      e.preventDefault();    } else{      e.returnValue=false;    };    var d_bkt=e.clientY-drag.offsetTop;    document.onmousemove=function (ev){      var e=ev||window.event;      var top=e.clientY-d_bkt;      if (top<=0) {        top=0;      };      if (top>=box.clientHeight-drag.clientHeight) {        top=box.clientHeight-drag.clientHeight;      };      var scale=top/(box.clientHeight-drag.clientHeight);      var cony=scale*(con.clientHeight-out.clientHeight);      drag.style.top=top+'px';      con.style.top=-cony+'px';      console.log(top);    }    document.onmouseup=function (){      document.onmousemove=null;    }  }  var str=window.navigator.userAgent.toLowerCase();  if (str.indexOf('firefox')!=-1) {//火狐浏览器    out.addEventListener('DOMMouseScroll',function (e){      e.preventDefault();//阻止窗口默认的滚动事件    if (e.detail<0) {      var t=con.offsetTop+20;      if (t>=0) {        t=0;      };      if (t<=-(con.clientHeight-out.clientHeight)) {        t=-(con.clientHeight-out.clientHeight);      };      var scale=t/(con.clientHeight-out.clientHeight);      var top=scale*(box.clientHeight-drag.clientHeight);      con.style.top=t+'px';      drag.style.top=-top+'px';    };    if (e.detail>0) {      var t=con.offsetTop-20;      if (t>=0) {        t=0;      };      if (t<=-(con.clientHeight-out.clientHeight)) {        t=-(con.clientHeight-out.clientHeight);      };      var scale=t/(con.clientHeight-out.clientHeight);      var top=scale*(box.clientHeight-drag.clientHeight);      con.style.top=t+'px';      drag.style.top=-top+'px';    };    },false);  } else{//非火狐浏览器    out.onmousewheel=function (ev){      var e=ev||window.event;      if (e.preventDefault) {        e.preventDefault();      } else{        e.returnValue=false;      };      if (e.wheelDelta>0) {      var t=con.offsetTop+20;      if (t>=0) {        t=0;      };      if (t<=-(con.clientHeight-out.clientHeight)) {        t=-(con.clientHeight-out.clientHeight);      };      var scale=t/(con.clientHeight-out.clientHeight);      var top=scale*(box.clientHeight-drag.clientHeight);      con.style.top=t+'px';      drag.style.top=-top+'px';    };    if (e.wheelDelta<0) {      var t=con.offsetTop-20;      if (t>=0) {        t=0;      };      if (t<=-(con.clientHeight-out.clientHeight)) {        t=-(con.clientHeight-out.clientHeight);      };      var scale=t/(con.clientHeight-out.clientHeight);      var top=scale*(box.clientHeight-drag.clientHeight);      con.style.top=t+'px';      drag.style.top=-top+'px';    };    }  };</script></body></html>