滚动条设置

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

是否可以滚动


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是默认值 水平方向对齐方式