隐藏浏览器默认滚动条和自定义滚动条样式
程序员文章站
2022-03-29 22:47:05
...
隐藏浏览器默认滚动条
Chrome浏览器和移动端可以使用-webkit-scrollbar 隐藏浏览器自带的滚动条；
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}而火狐和IE可以通过给溢出的盒子嵌套一个父盒子，设置溢出部分auto显示，然后使其宽度增加17px（浏览器默认占据内容的宽度为17px）然后给包裹内容的父盒子在设置overflow：hidden；隐藏溢出的滚动条部分；就可以将默认滚动条样式不可见了。
原理如图所示：
//css样式
<style>
.container {
width: 230px;
height: 452px;
background-color: #ff4a00;
opacity: 0.8;
overflow: hidden;
}
.wrap {
height: 452px;
/* width: 230px; */
width: 247px;
overflow-y: auto;
}
.content {
width: 230px;
height: 524px;
}
</style>
//html结构
<div class="container">
<div class="wrap">
<div class="content">sss</div>
</div>
</div> 自定义滚动条的实现原理：给设置overflow：auto的盒子绑定滚动事件；然后进行数学计算；然后设置拖拽滚动条设置对应的绑定事件，滚动条.onmousedown，document.onmousemove ，document.onmouseup 三个事件计算出滚动条拖拽的距离；距离必须大于0；小于被滚动条滚动的最大距离；然后转为内容被卷曲的高度；注意：此处内容被卷曲的高度，是对包裹内容的盒子进行操作，将它设置为相对定位，将卷曲的距离设置top值，即整个盒子相对于原来的位置向上移动；完成拖拽滚动的效果。
原理图：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义实现滚动条</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.container {
position: relative;
margin-left: 100px;
margin-top: 20px;
width: 230px;
height: 452px;
background-color: #ff4a00;
opacity: 0.8;
overflow: hidden;
}
.wrap {
width: 247px;
height: 452px;
background-color: violet;
overflow: auto;
}
.content {
position: relative;
width: 230px;
height: 524px;
background-color: steelblue;
}
.content li {
box-sizing: border-box;
width: 100%;
height: 25%;
background-color: steelblue;
border-top: 2px solid #ccc;
}
.autoProgress {
position: absolute;
right: 0;
top: 0;
width: 8px;
height: 310px;
background-color: #ff4600;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<ul class="content">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<!-- 自定义滚动条 -->
<div class="autoProgress"></div>
</div>
<script>
var content = document.querySelector('.wrap');
var box = document.querySelector('.content');
var autoProgress = document.querySelector('.autoProgress');
// 包裹被卷曲的内容的盒子触发 最多被卷曲的高度为72px
// console.log(content.clientHeight); //452
// console.log(autoProgress.clientHeight); //310
// 滚动条最大滚动距离
var MaxScroll = content.clientHeight - autoProgress.clientHeight; //142
content.onscroll = function () {
var contScrollTop = content.scrollTop;
// 最大卷曲的高度/卷曲的高度=最大滚动的距离/滚动的距离
var dis = MaxScroll * contScrollTop / 72;
autoProgress.style.top = dis + 'px';
}
// 拖拽滚动条的的事件
autoProgress.onmousedown = function (ev) {
var pdis = this.parentNode.offsetTop; //20
var startDownY = ev.pageY;
document.onmousemove = function (ev) {
var moveY = ev.pageY;
var dis = moveY - pdis - startDownY;
if (dis <= 0) {
dis = 0;
} else if (dis >= 142) {
dis = 142
}
// 滚动条实现滚动
autoProgress.style.top = dis + 'px';
// 内容如何移动呢 内容被蜷曲的距离
var boxScrollTop = -dis * 72 / MaxScroll;
box.style.top = boxScrollTop + 'px';
}
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
</script>
</body>
</html>bingo！！！完成嘻嘻嘻~~~
上一篇： Java笔记（一）
下一篇： LOG和DOG边缘检测