js实现水平和竖直滑动条

编辑: admin 分类: javascript 发布时间: 2022-01-01 来源:互联网

最近在做练手项目时候，需要用到滑动条，所以就稍微研究了一下。

首先来看水平滑动条，效果图如下：

代码如下：

<html>
 <head>
  <meta charset="UTF-8">
  <title>水平滑动条</title>
  <style>
   * {
    margin: 0;
    padding: 0;
   }
 
   .scroll {
    margin: 100px;
    width: 500px;
    height: 5px;
    background: #ccc;
    position: relative;
   }
 
   .bar {
    width: 10px;
    height: 20px;
    background: #369;
    position: absolute;
    top: -7px;
    left: 0;
    cursor: pointer;
   }
   p{
    margin-left: 100px;
   }
  </style>
 </head>
 <body>
  <div class="scroll" id="scroll">
   <div class="bar" id="bar">
   </div>
  </div>
  <p></p>
  <script>
   //获取元素
   var scroll = document.getElementById('scroll');
   var bar = document.getElementById('bar');
   var ptxt = document.getElementsByTagName('p')[0];
   bar.onmousedown = function(event) {
    var event = event || window.event;
    //页面事件的X减去当前相对于最近的祖先定位元素
    var x = event.clientX - this.offsetLeft;
    document.onmousemove = function(event) {
     var event = event || window.event;
     var left = event.clientX - x;
     if (left < 0)
      left = 0;
     else if (left > scroll.offsetWidth - bar.offsetWidth) {
      left = scroll.offsetWidth - bar.offsetWidth;
     }
     //改变滑块的left
     bar.style.left = left + "px";
     ptxt.innerHTML = "当前滑块的移动的百分比：" + parseInt(left / (scroll.offsetWidth - bar.offsetWidth) * 100) + "%";
     //防止选择内容
     window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    }
 
   }
   //当鼠标弹起的时候，不做任何操作
   document.onmouseup = function() {
    document.onmousemove = null;
   }
  </script>
 </body>
</html>

竖直滑动条效果图如下：

代码如下：

<html>
 <head>
  <meta charset="UTF-8">
  <title>竖直滑动条</title>
  <style>
   * {
    margin: 0;
    padding: 0;
   }
   .scroll{
    margin: 100px;
    width: 5px;
    height: 320px;
    background: #ccc;
    position: relative;
   }
 
   .bar {
    width: 15px;【文章由高防cdn提供，感恩】
    height: 5px;
    background: #369;
    position: absolute;
    top: 0px;
    left: -5;
    cursor: pointer;
   }
   p{
    margin-left: 100px;
   }
  </style>
 </head>
 <body>
  <div class="scroll" id="scroll">
   <div class="bar" id="bar">
   </div>
  </div>
  <p></p>
  <script>
   //获取元素
   var scroll = document.getElementById("scroll");
   var bar = document.getElementById("bar");
   var ptxt = document.getElementsByTagName('p')[0];
   //添加事件
   bar.onmousedown = function(event) {
    var event = event || window.event;
    //页面事件的Y减去当前相对于最近的祖先定位元素
    var y = event.clientY - this.offsetTop;
    // 拖动需要写到down里面
    document.onmousemove = function(event) {
     var event = event || window.event;
     //获取移动的距离
     var top = event.clientY - y;
     if (top < 0){
      top = 0;
     }
     else if (top > scroll.offsetHeight - bar.offsetHeight){
      top = scroll.offsetHeight - bar.offsetHeight;
     }
     //改变滑块的top
     bar.style.top = top + "px";
     //按照百分比得到当前滑动的距离
     ptxt.innerHTML = "当前滑块的移动的百分比：" + parseInt(top/(scroll.offsetHeight - bar.offsetHeight) * 100) + "%";
     //防止选择内容
     window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    }
   }
   //当鼠标弹起的时候，不做任何操作
   document.onmouseup = function() {
    document.onmousemove = null; 
   }
   
  </script>
 </body>
</html>

这里之所以加入移动百分比的展示效果，主要是考虑到后续如果需要对接后台的数据就可以达到动态控制的目的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持hwidc。

更多阅读