关于模拟一个滚动条的实现 |
您所在的位置:网站首页 › css手册手机版 › 关于模拟一个滚动条的实现 |
关于模拟一个滚动条的实现------横向滚动条 原生 html css js
在日常开发中会遇到一些时候,在实现内部滚动的同时,也希望用户看到当前的滚动位置 但是 overflow: auto; 的滚动条太难看了,尽管可以重些一些样式,但是移动端仍不支持。 无奈只能做出妥协,遂想 可否实现自定义模拟一个滚动指示器出来,以求满足业务要求。 以下是实例 下面附详细代码不再过多赘述,直接运行即可 注释中有说明 Document main { width: 100%; height: 200px; background-color: #ffcdcd; overflow-x: auto; } main>div { width: 120vw; } footer { width: 100px; height: 10px; background-color: #d1eff8; margin: 20px auto; border-radius: 5px; } footer>div { width: 50px; height: 10px; background-color: #38616d; border-radius: 5px; } dasdasgddddddddddddddddddddddddddddddddddddddddddd 0.00% // 获取滚动元素的父元素 let mainBox = document.querySelector('main') let scollAllWidth = document.querySelector('footer').offsetWidth let scollWidth = document.querySelector('footer>div').offsetWidth let thisScolljd = scollAllWidth - scollWidth // 代表模拟滚动条的滚动大小 // 给元素添加scoll事件,方便获取滚动的具体数据 mainBox.addEventListener('scroll', (e) => { // console.log(e) const { target } = e // console.log(target.offsetWidth); // 可视的宽度 // console.log(target.scrollLeft); // 当前滚动的宽度 // console.log(target.scrollWidth); // 滚动区域总宽度 // console.log(target.scrollWidth - target.offsetWidth); // 总滚动的长度 let thisJd = target.scrollLeft / (target.scrollWidth - target.offsetWidth) // 当前滚动的距离 / 代表滚动的总距离 document.querySelector('#jindu').innerHTML = (thisJd * 100).toFixed(2) + '%' // 滚动的百分比 document.querySelector('.thisDiv').style.marginLeft = `${thisScolljd* thisJd}px` // 根据上放计算进度,改变下方模拟的位置 // console.log((thisJd * 100).toFixed(2), '%'); // 当前滚动的百分比 });以上案例是一个基本的效果,实际使用须隐藏原生滚动条即可。 隐藏滚动条百度很多, 可以在父元素添加 overflow:hidden, 只要高度或者宽度小于子元素,即可隐藏 纵/横向滚动条了。 想必各位都懂,就未出现在代码中。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |