不同浏览器滚动条样式及滚动定位
是否可以滚动
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是默认值 | 水平方向对齐方式 |