q1277267304 2021-09-10 08:32 采纳率: 80%
浏览 38
已结题

如何通过js代码或者css样式控制滚动条滑块?

能否通过js代码动态的控制页面滚动条滑块的颜色显示与隐藏?例如控制(::-webkit-scrollbar-thumb)逐渐透明直至消失

  • 写回答

1条回答 默认 最新

  • 小P聊技术 2021-09-10 09:09
    关注

    效果图

    页面构成

     <span class="box" id="box-lj-sgj">
                    <i class="hd"></i>
                    <i class="hdt"></i>
     </span>
    

    css

    .tab-con .box,.tab-con .box .hd,.tab-con .box .hdt{
            display: inline-block;
            *display: inline;
            zoom:1;
    }
    .tab-con .box {
            cursor: pointer;
            width: 195px;
            height: 3px;
            background-color: #bdbdbd;
            position: relative;
            vertical-align: middle;
        }
    .tab-con .box .hd {
            width: 17px;
            height: 18px;
            background-color: #56a3fc;
            border-radius: 6px;
            position: absolute;
            left: 0;
            top: -8px;
            cursor: pointer;
            margin: 0;
    }
    .tab-con .box .hdt {
            position: absolute;
            top: 0;
            left: 0;
            height: 3px;
            width: 0;
            background-color: #56a3fc;
            margin: 0;
    }
    

    js代码

    function slider(obj,num){
        var box = document.getElementById(obj);
             var hd = box.children[0];
             var hdt = box.children[1];
             //鼠标按下事件  只要鼠标按下时是在hd上触发就可以
             hd.onmousedown = function(event){
                 var event = event || window.event;
                 //event.clientX 鼠标按下时的x坐标
                 //this.offsetLeft 圆点到box的距离
                 //leftval box距离左边边界的距离
                 var leftval = event.clientX - this.offsetLeft;
                 var _this = this;
                 //滑动事件 作用在document上,因为如果是作用在hd.onmousemove,滑动时可能会出现鼠标脱离hd范围(范围太小)而停止滑动,但是此时鼠标按下还没有弹起还处于滑动状态,所以就产生了bug
                 document.onmousemove = function(event){
                     var event = event || window.event;
                     //hd.style.left = _this.offsetLeft + "px";
                     //offsetLeft 是要有left值的前提下才产生,不能offsetLeft先赋值给left
                     hd.style.left = event.clientX - leftval + "px";
    
                     var far = parseInt(hd.style.left);
                       
                     //临界值判断
                     if(far < 0){
                         hd.style.left = 0;
                     }
                     else if(far > 195){
                         hd.style.left = 195+"px";
                     }
                     
                     hdt.style.width = hd.style.left;
                     //保留两位小数
    //               var result = Math.floor((parseInt(hdt.style.width)/195 * num) * 100) / 100;
                   //取整
                     var result = parseInt(parseInt(hdt.style.width)/195 * num);
                     //效果图上的476
                     box.nextSibling.nextSibling.value = result;
    //               console.log(box.nextSibling.nextSibling);
                     window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();//清除选中的文本
                 }
            //当鼠标弹起时清除滑动时运行的函数,因为滑动结束时鼠标可能不在hd上,所以用document监听弹起事件
                 document.onmouseup = function(){
                     document.onmousemove = null;
                 }
    
             }
             //点击选择位置
             box.onclick = function(event){
                 var event = event || window.event;
                 var boxWidth = event.clientX-this.offsetLeft;
                 if(boxWidth > 195){
                         boxWidth = 195;
                 }
                 hdt.style.width = hd.style.left = boxWidth + 'px';
                 var result = parseInt(parseInt(hdt.style.width)/195 * num);
                 box.nextSibling.nextSibling.value = result;
                 console.log(event.clientX-this.offsetLeft);
             }
    }
    

    调用slider(obj,num)函数即可

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 9月18日
  • 已采纳回答 9月10日
  • 创建了问题 9月10日

悬赏问题

  • ¥15 oracle集群安装出bug
  • ¥15 关于#python#的问题:自动化测试
  • ¥20 问题请教!vue项目关于Nginx配置nonce安全策略的问题
  • ¥15 教务系统账号被盗号如何追溯设备
  • ¥20 delta降尺度方法,未来数据怎么降尺度
  • ¥15 c# 使用NPOI快速将datatable数据导入excel中指定sheet,要求快速高效
  • ¥15 再不同版本的系统上,TCP传输速度不一致
  • ¥15 高德地图2.0 版本点聚合中Marker的位置无法实时更新,如何解决呢?
  • ¥15 DIFY API Endpoint 问题。
  • ¥20 sub地址DHCP问题