滚动条设置

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

是否可以滚动

---

overflow：scroll 
overflow：auto

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

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

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

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

伪元素选择器	说明	用法
::-webkit-scrollbar	滚动条整体部分	width设置为0来隐藏滚动条
::-webkit-scrollbar-thumb	滚动条滑块	背景色、颜色修改
::-webkit-scrollbar-track	滚动条的轨道
::-webkit-scrollbar-button	滚动条的轨道的两端按钮，点击它也可以滚动

  ::-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;

  }

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

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

scrollbar-width

属性值	宽度	说明
auto	17px	默认值
thin	8px	宽度比较小
none	0	不显示滚动条但是仍可以滚动

scrollbar-color

属性值	说明
auto	默认状态
#226ec2 white	第一个颜色为滚动滑块的颜色，第二个为滑道的颜色	只设置一个还不生效

滚动到指定位置

1》scrollTo()

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

基本使用：

element.scrollTo({
  top: 100,
  left: 100,
  behavior: "smooth",
});

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

behavior的兼容性相对差一点

2》scrollTop

基本使用：

el.scrollTop=number

将html滚动到最顶部

document.documentElement.scrollTop = 0;

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

3》scrollIntoView

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

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

配置：

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

option	value	说明
behavior	smooth平滑滚动 instance直接滚动到位 auto自动	平滑还是一步到位
block	start/center/end/nearest；start是默认值，元素上边缘与视口对齐	垂直方向对齐方式
inline	可选值block的一样；nearest是默认值	水平方向对齐方式