• 售前

  • 售后

热门帖子
入门百科

原生js实现自定义滚动条

[复制链接]
加菲猫419 显示全部楼层 发表于 2021-10-25 19:20:04 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了js实现自界说滚动条的详细代码,供大家参考,详细内容如下
1.HTML文件

div1是滚动条,div2是滚动小球,div3是文本地区容器,div4是文本地区。
  1. <div id="div">
  2. <div id="div1">
  3. <div id="div2"> </div>
  4. </div>
  5. <div id="div3">
  6. <div id="div4">
  7. <p>CSS3 教程</p>
  8. <p>CSS3 教程</p>
  9. <p>CSS3 简介</p>
  10. <p>CSS3 边框</p>
  11. <p>CSS3 圆角</p>
  12. <p>CSS3 背景</p>
  13. <p>CSS3 渐变</p>
  14. <p>CSS3 文本效果</p>
  15. <p>CSS3 字体</p>
  16. <p>CSS3 2D 转换</p>
  17. <p>CSS3 3D 转换</p>
  18. <p>CSS3 过渡</p>
  19. <p>CSS3 动画</p>
  20. <p>CSS3 多列</p>
  21. <p>CSS3 用户界面</p>
  22. <p>CSS3 图片</p>
  23. <p>CSS3 按钮</p>
  24. <p>CSS3 分页</p>
  25. <p>CSS3 框大小</p>
  26. <p>CSS3 弹性盒子</p>
  27. <p>CSS3 多媒体查询</p>
  28. <p>CSS3 多媒体查询实例</p>
  29. </div>
  30. </div>
  31. </div>
复制代码
2.css样式文件

通过容器溢出隐蔽,文本地区的绝对定位,然后再交给js处置处罚。
  1. *{padding: 0; margin: 0;}
  2. #div{top:200px;left:25%;width: 50%;height: 300px; position: absolute;
  3. }
  4. #div1{width: 20px; height: 300px; position: relative;
  5. background: #CCCCCC; border-radius: 28px; float: right; cursor: pointer;}
  6. #div1 #div2{left: -4px;width: 28px;height: 28px;border-radius: 50%; background: red;
  7. position: absolute;}
  8. #div3{width: 90%; height: 300px; border: 2px solid #CCCCCC;
  9. position: relative; float: left; overflow: hidden;}
  10. #div3 #div4{top:0;left:0;width: 100%; position: absolute; font-family: "微软雅黑";
  11. font-size: 19px; letter-spacing: 1px; padding: 3px 6px;}
复制代码
3.js脚本代码
  1. window.onload =function(){
  2. var allDiv =document.getElementById('div');
  3. var oDiv =document.getElementById('div2');
  4. var aDiv =document.getElementById('div1');
  5. var textDiv1 =document.getElementById('div3');
  6. var textDiv2 =document.getElementById('div4');
  7. // 进度条拖动,内容跟着运动事件
  8. oDiv.onmousedown =function(ev){
  9. var oEvent =ev||event;
  10. var disY =oEvent.clientY -oDiv.offsetTop;
  11. if(oDiv.setCapture){
  12. oDiv.onmousemove =mouseMove;
  13. oDiv.onmouseup =mouseUp;
  14. oDiv.setCapture();
  15. }else{
  16. document.onmousemove =mouseMove;
  17. document.onmouseup =mouseUp;
  18. }
  19. function mouseMove(ev){
  20. var oEvent =ev||event;
  21. var t =oEvent.clientY -disY;
  22. var bottomLine = aDiv.offsetHeight-oDiv.offsetHeight;
  23. if(t <0){
  24. t =0;
  25. }else if(t >bottomLine){
  26. t =bottomLine;
  27. }
  28.   var percent =t/272;
  29.   
  30. oDiv.style.top =t+'px';
  31. textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent+'px';
  32. };
  33. function mouseUp(){
  34. this.onmousemove =null;
  35. this.onmouseup =null;
  36. if(oDiv.releaseCapture){
  37. oDiv.releaseCapture();
  38. }
  39. };
  40. return false;
  41. };
  42. // 点击进度条,开启定时器,小球做匀速运动到达后,清楚定时器
  43. aDiv.onmousedown=function(ev){
  44. var oEvent =ev||event;
  45. var divY =oEvent.clientY-allDiv.offsetTop;
  46. var timer =null;var speed=10;
  47. clearInterval(timer)
  48. timer = setInterval(function(){
  49. var percent=oDiv.offsetTop/272;
  50. if(oDiv.offsetTop<divY-28){
  51. oDiv.style.top =oDiv.offsetTop + speed +'px';
  52. textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent +'px';
  53. }else if(oDiv.offsetTop>divY){
  54. oDiv.style.top =oDiv.offsetTop - speed +'px';
  55. textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent +'px';
  56. }else if(oDiv.offsetTop>260){
  57. oDiv.offsetTop = 272+'px';
  58. clearInterval(timer);
  59. }else if(oDiv.offsetTop<10){
  60. oDiv.offsetTop = 0+'px';
  61. clearInterval(timer);
  62. }else{
  63. clearInterval(timer);
  64. }
  65. },10);
  66. }
  67. }
复制代码
以上就是本文的全部内容,盼望对大家的学习有所资助,也盼望大家多多支持脚本之家。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作