这个大概是修改滚动条样式方法最全的文章了 |
您所在的位置：网站首页 › 用js实现滚动条 › 这个大概是修改滚动条样式方法最全的文章了 |
这个大概是修改滚动条样式方法最全的文章了
|
背景： 在平时的项目开发中，由于滚动条在各个浏览器中的实现是不一致的，视觉对于滚动条的样式有一定的定制化要求，或者统一各个浏览器的滚动条样式(至少我遇到了)。下面就来说说修改滚动条样式的方式。 通过CSS来修改1. 创建一个简单的带滚动条的html页面：代码如下： 滚动条样式 .father{ height:300px; width: 300px; overflow: auto } .child{ width: 400px; height: 400px } 111这个页面在chrome、firefox、ie下的展示： chrome： firefox: IE: 主流浏览器样式各不同，CSS3中有对滚动条修改的方式，如下代码： .father::-webkit-scrollbar{ width:10px; height:10px; /**/ } .father::-webkit-scrollbar-track{ background: rgb(239, 239, 239); border-radius:2px; } .father::-webkit-scrollbar-thumb{ background: #bfbfbf; border-radius:10px; } .father::-webkit-scrollbar-thumb:hover{ background: #333; } .father::-webkit-scrollbar-corner{ background: #179a16; }chrome下修改后的效果其它两个浏览器不变。 因为是-webkit-开头的，只针对webkit内核浏览器有效。 那怎么修改IE浏览器的滚动条样式呢？ .father{ scrollbar-arrow-color: red; scrollbar-face-color: #333; scrollbar-3dlight-color: #666; scrollbar-highlight-color: #666; scrollbar-shadow-color: #999; scrollbar-darkshadow-color: #666; scrollbar-track-color: #666; scrollbar-base-color:#f8f8f8 }IE下修改后的效果这段代码也只针对IE下的滚动条修改，对其它两款浏览器无用。IE也仅能修改其颜色，宽度无法自定义。 firefox怎么修改呢？ 这个修改不了啊！！！！！！！(如果有只通过css修改firefox滚动条样式的同学，请赐教) 那怎么办？ 只能通过js来实现了，前端没有js实现不了的需求。 通过JS自定义滚动条首先上效果chrome:
纵向滚动条大概结构已经写好，接下来就开始写js了。 var fatherScrollHeight,fatherClientHeight;// 父高度,滚动高度 var warp = document.querySelector('.father'); fatherClientHeight = warp.clientHeight; // 获取父高度 fatherScrollHeight = warp.scrollHeight; // 获取父可滚动高度 var present = fatherClientHeight / fatherScrollHeight; // 计算滚动条应该占多高 var scrollWarp = document.querySelector('.rail'); scrollWarp.style.height = present*100 + '%'; // 用百分比计算rail的高度 warp.addEventListener('scroll',function(e){ // 添加滚动事件 console.log(e.target.scrollTop); scrollWarp.style.transform = 'translateY(' + e.target.scrollTop * 100/fatherClientHeight + '%)' })完成。 总结本文只是用最原生的方式来阐述统一滚动条的原理，这里仅实现其一部分功能，还有很多的功能需要完善，比如添加rail(轨道)的拖动事件与鼠标离开事件，还有样式需要与视觉一致，高度不够滚动时的判断等等。由于工作原因，没得继续往下写了。 由于自己用的vue与react框架写业务，它们都有现成的自定义滚动条组件(公司内部封装)，有需要的可以去github搜索一下，还是有很多写好的scroll组件，这里就不献丑了。 第一次发文，大佬们请多多赐教！ |
【本文地址】