1.使用CSS滚动条选择器
你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:
-
::-webkit-scrollbar— 整个滚动条. -
::-webkit-scrollbar-button— 滚动条上的按钮 (上下箭头). -
::-webkit-scrollbar-thumb— 滚动条上的滚动滑块. -
::-webkit-scrollbar-track— 滚动条轨道. -
::-webkit-scrollbar-track-piece— 滚动条没有滑块的轨道部分. -
::-webkit-scrollbar-corner— 当同时有垂直滚动条和水平滚动条时交汇的部分. -
::-webkit-resizer— 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
例子：
/* css */
.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
display: block;
width: 10em;
overflow: auto;
height: 2em;
}
.invisible-scrollbar::-webkit-scrollbar {
display: none;
}
/* Demonstrate a "mostly customized" scrollbar
* (won't be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
width: 5px;
height: 8px;
background-color: #aaa; /* or add it to the track */
}
/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
background: #000;
}
<!-- HTML -->
<div class="visible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
<div class="invisible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
<div class="mostly-customized-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br>
And pretty tall<br>
thing with weird scrollbars.<br>
Who thought scrollbars could be made weeeeird?</div>
方法2 容器嵌套
首先滚动条的宽度是17px;
大致原理就是在产生滚动条的容器 的 外层再嵌套一层，宽度比他小17px，然后overflow: hidden;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.outer-container {
overflow-x: hidden;
width: 100px;
}
.inner-container {
width: 117px;
height: 100px;
overflow-y: scroll;
}
.content {
height: 1000px;
}
</style>
</head>
<body>
<div class="outer-container">
<div class="inner-container">
<div class="content">
......
</div>
</div>
</div>
</body>
</html>
也可以使用position: relative; 和 position: absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.outer-container {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
left: 0;
top: 0;
right: -17px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.content {
height: 2000px;
}
</style>
</head>
<body>
<div class="outer-container">
<div class="inner-container">
<div class="content">
......
</div>
</div>
</div>
</body>
</html>
使用负margin来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.outer-container {
height: 100px;
overflow: hidden;
}
.inner-container {
margin-right: -17px;
margin-bottom: -17px;
height: 100%;
overflow-y: scroll;
overflow-x: auto;
}
.content {
height: 2000px;
}
</style>
</head>
<body>
<div class="outer-container">
<div class="inner-container">
<div class="content">
......
</div>
</div>
</div>
</body>
</html>
网友评论