如何实现自定义模拟一个滚动指示器出来的说明以上案例
关于模拟一个滚动条的实现------横向滚动条 原生 html css js
在日常开发中会遇到一些时候,在实现内部滚动的同时滚动条隐藏css,也希望用户看到当前的滚动位置
但是 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滚动条隐藏css, 只要高度或者宽度小于子元素,即可隐藏 纵/横向滚动条了。
想必各位都懂,就未出现在代码中。
文章由官网发布,如若转载,请注明出处:https://www.veimoz.com/1367
0 评论
684
发表评论
热门文章
自媒体博客Spimes主题34w 阅读
Spimes主题专为博客、自媒体、资讯类的网站设计....
vCard主题个人简历主题13w 阅读
一款个人简历主题,可以简单搭建一下,具体也比较简单....
Splity博客双栏主题11w 阅读
仿制主题,Typecho博客主题,昼夜双版设计,可....
Spzac个人资讯下载类主题11w 阅读
用于作品展示、资源下载,行业垂直性网站、个人博客,....
热评文章
自媒体博客Spimes主题418 评论
Splity博客双栏主题187 评论
Spzac个人资讯下载类主题89 评论
Splinx博客图片主题35 评论
Spzhi知识付费社区主题34 评论
三栏清新博客S_blog主题30 评论
vCard主题个人简历主题29 评论
Pure轻简主题28 评论
尘集杂货铺和官网1t5-cn
11月11日
[已回复]
希望主题和播放器能支持SQLite数据库,AI能多个讯飞星火