滚动条设置

不同浏览器滚动条样式及滚动定位

是否可以滚动

---

overflow：scroll 
overflow：auto
1
2

overflow:scroll – 只有超出了盒子才会有滚动条

overflow:auto – 一直有滚动的盒子，只是超出了盒子才会出现滚动条滑块，可以滚动

谷歌浏览器滚动条样式设置

针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式

  ::-webkit-scrollbar {

    width: 10px; //滚动条的宽度设置

  }

  ::-webkit-scrollbar-thumb {

    background-color: rgb(59, 182, 225); //滚动条滑块颜色

    transition: all 0.2s;

    border-radius: 6px;

  }

  ::-webkit-scrollbar-thumb:hover {

    background-color: #2b85e0;

  }

  ::-webkit-scrollbar-track {

    background-color: #f5f5f5; // 滑道的背景色

  }

  ::-webkit-scrollbar-button {

    height: 6px;

    background-color: #ccc;

  }
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
26
27
28
29
30
31
32
33
34
35

火狐浏览器的滚动条样式设置

火狐64以上版本都支持，2018.11 出的 64 版本

scrollbar-width

scrollbar-color

滚动到指定位置

1》scrollTo()

如果没生效试试给出现滚动条的盒子添加相对定位

基本使用：

element.scrollTo({
  top: 100,
  left: 100,
  behavior: "smooth",
});
1
2
3
4
5

behavior：smooth 表示平滑滚动并产生过渡效果、instant 表示滚动会直接跳转到目标位置，没有过渡效果。auto自动选择滚动效果

behavior的兼容性相对差一点

2》scrollTop

基本使用：

el.scrollTop=number
1

将html滚动到最顶部

document.documentElement.scrollTop = 0;
1

优点就是兼容性好
css属性scroll-behavior:smooth也可以设置平滑滚动，可以搭配着它们一起使用

3》scrollIntoView

滚动元素的父容器，使被调用 scrollIntoView()的元素对用户可见

     document.querySelector(".test").scrollIntoView();
1

配置：

element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
1