一：webkit下面的CSS设置滚动条
主要有下面7个属性
::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
实例
::-webkit-scrollbar {
width: 3px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
border-radius: 10px;
box-shadow: inset006pxrgba(0, 0, 0, 0.3);
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
background: rgba($color: $theme, $alpha: 0.7);
border-radius: 10px;
box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
overflow-y: scroll;
scrollbar-color: rgba($color: $theme, $alpha: 0.7)
rgba($color: $theme, $alpha: 0.7);
-moz-appearance: none !important;
::-moz-scrollbar[orient="vertical"] {
width: 3px !important;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
二：IE下面的CSS设置滚动条
IE下面就比较简单那了，自定义的项目比较少，全是颜色。
scrollbar-arrow-color: color; /三角箭头的颜色/
scrollbar-face-color: color; /立体滚动条的颜色（包括箭头部分的背景色）/
scrollbar-3dlight-color: color; /立体滚动条亮边的颜色/
scrollbar-highlight-color: color; /滚动条的高亮颜色（左阴影？）/
scrollbar-shadow-color: color; /立体滚动条阴影的颜色/
scrollbar-darkshadow-color: color; /立体滚动条外阴影的颜色/
scrollbar-track-color: color; /立体滚动条背景颜色/
scrollbar-base-color:color; /滚动条的基色/
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
三：css优化滚动效果
scroll-behavior:smooth;//写在滚动容器元素上，可以让容器（非鼠标手势触发）的滚动变得平滑
-webkit-overflow-scrolling: touch; //让滚动具有惯性
overscroll-behavior: contain；//我们会发现当子元素滚动到顶部或底部继续滚动滚轮时，会导致父元素的滚动，但这种行为有时会影响页面体验。使用该属性可以禁掉此行为。在子元素上应用这个属性即可，在移动端还可以禁用下拉刷新的功能，只要在body元素上应用overscroll-behavior-y: contain;即可
1
2
3
2
3
如果觉得滚动条不需要，可以设置隐藏
/* webkit */
.container::-webkit-scrollbar {
display: none; //Safari and Chrome
}
/* IE或者Firefox */
.container {
-ms-overflow-style: none; //IE 10+
overflow: -moz-scrollbars-none; //Firefox
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
在移动端时，优化用户触碰手势，可以使用这个属性：touch-action
四：scrollIntoView
上面说到：scroll-behavior 是指定滚动函数的默认行为，这其中就包括 scrollIntoView。顾名思义：这个函数就是把某个元素滚动到窗口的可见区域。
它接受两种形式的值：布尔值或对象。接受布尔值主要还是为了兼容不支持平滑滚动（老版）的浏览器。我们这里只说对象值、
{
behavior: "auto" | "instant" | "smooth", // 默认 auto
block: "start" | "center" | "end" | "nearest", // 默认 center
inline: "start" | "center" | "end" | "nearest", // 默认 nearest
}
1
2
3
4
5
2
3
4
5
对象可以有三个参数。
- behavior 表示滚动方式。auto 表示使用当前元素的 scroll-behavior 样式。instant 和 smooth 表示 直接滚到底 和 使用平滑滚动。
- block 表示块级元素排列方向要滚动到的位置。对于默认的 writing-mode: horizontal-tb 来说，就是竖直方向。start 表示将视口的顶部和元素顶部对齐；center 表示将视口的中间和元素的中间对齐；end 表示将视口的底部和元素底部对齐；nearest 表示就近对齐。
- inline 表示行内元素排列方向要滚动到的位置。对于默认的 writing-mode: horizontal-tb 来说，就是水平方向。其值与 block 类似。 目前浏览器支持度欠佳；案例
五：scrollIntoViewIfNeeded()
scrollIntoViewIfNeeded(true)方法只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中可见，这个方法什么也不做，如果将可选的alignCenter参数设置为true，则表示尽量将元素显示在视口中部(垂直方向)，[注意]该方法只有chrome和safari支持
<body style="height:1000px">
<div id="test" style="height:100px;width:100px;position:absolute;left:0;top:500px;background-color:green"></div>
<button id='btn' style="position:fixed">滚动到页面中间</button>
<script>
var btn=document.getElementById('btn')
var test=document.getElementById('test')
btn.onclick = function(){
test.scrollIntoViewIfNeeded(true)
};
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
六：滚动方法
scrollTo(x,y)
scrollTo(x,y)方法滚动当前window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的左上角
<body style="height:1000px">
<button id='btn' style="position:fixed">滚动</button>
<script>
var btn=document.getElementById('btn')
btn.onclick = function(){scrollTo(0,0);}
</script>
1
2
3
4
5
6
2
3
4
5
6
scrollBy(x,y)
scrollBy(x,y)方法滚动当前window中显示的文档，x和y指定滚动的相对量
<body style="height:1000px">
<button id='btn1' style="position:fixed">向下滚动</button>
<button id='btn2' style="position:fixed;top:40px">向上滚动</button>
<script>
var btn1=document.getElementById('btn1')
var btn2=document.getElementById('btn2')
btn1.onclick = function(){scrollBy(0,100);}
btn2.onclick = function(){scrollBy(0,-100);}
</script>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
利用scrollBy()加setInterval计时器实现简单的快速滚动功能
<body style="height:1000px">
<button id='btn1' style="position:fixed">开始滚动</button>
<button id='btn2' style="position:fixed;top:40px">停止滚动</button>
<script>
var timer = 0;
var btn1=document.getElementById('btn1')
var btn2=document.getElementById('btn2')
btn1.onclick = function(){
timer = setInterval(function(){
scrollBy(0,10);
},100)}
btn2.onclick = function(){
clearInterval(timer);
timer = 0;
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
兼容写法
理论上，通过document.documentElement.scrollTop和scrollLeft可以反映和控制页面的滚动；但是chrome和safari浏览器是通过document.body.scrollTop和scrollLeft来控制的
var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop
1