本文用到的Web Api有绝对滚动element.scrollTo()、相对滚动element.scrollBy()、滚动到指定元素element.scrollIntoView()
场景1. 滚动到顶部
window.scrollTo(0, 0);
2. 滚动到底部
window.scrollTo(0, document.documentElement.offsetHeight);
3. 平滑滚动到顶部
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
4. 平滑滚动到底部
window.scrollTo({ top: document.documentElement.offsetHeight, left: 0, behavior: 'smooth' });
5. 控制其他元素节点(textarea、div)
let elem = document.querySelector('textarea/div');
let height = elem.offsetHeight;
elem.scrollTo({ top: height, left: 0, behavior: 'smooth' });
6. 相对当前滚动条位置滚动
window.scrollBy({ top: 100, left: 0, behavior: 'smooth' });
7. 滚动到指定元素
let elem = document.querySelector(selector);
// 使元素出现在视窗顶部
elem.scrollIntoView({ block: 'start' });
// 使元素出现在视窗中间
elem.scrollIntoView({ block: 'center' });
// 使元素出现在视窗底部
elem.scrollIntoView({ block: 'end' });
// 加过渡动画
elem.scrollIntoView({ behavior: 'smooth' });
8. 滚动到锚点位置
9. 平滑滚动到锚点位置
方案一
将上面的html代码改成
javascript
function scrollToTarget(target) {
let elem = document.querySelector(target);
elem.scrollIntoView({behavior: 'smooth'});
return elem;
}
方案二
html结构保持最初的不变( 锚点 )，然后加个终极平滑过渡 ( 详情看下面 )
10. 终极平滑过渡
给需要平滑滚动的元素加上此样式，一般指父元素 ( 该样式可以使本文所有添加过渡的javascript代码都省略 )
body {
scroll-behavior: smooth;
}
其他元素需要自行继承、设置
.scroll-box {
scroll-behavior: inherit;
}
11. 移动端丝滑滚动
当大家对一个元素设置overflow: auto；的时候，在移动端滚动会发现非常僵硬，加下面样式即可解决
.scroll-box {
-webkit-overflow-scrolling: touch;
}
12. 自定义滚动条样式
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
background-color: hsla(220, 4%, 58%, .3);
border-radius: 10px;
}
::-webkit-scrollbar ::-webkit-scrollbar-thumb ::-webkit-scrollbar-track ::-webkit-scrollbar-button ::-webkit-scrollbar-track-piece ::-webkit-scrollbar-corner ::-webkit-resizer /* 两个滚动条的交汇处上用于通
13. 获取当前滚动条的x、y值
let { scrollX, scrollY } = window.scroll;
14. 封装滚动条是否滚动到底部函数
let onReachBottom = function (callback) {
window.onscroll = function () {
// 滚动高度 + 视窗高度 >= 内容高度
let isBottom = window.scrollY + document.documentElement.clientHeight >= document.body.clientHeight;
if (isBottom) {
callback && callback();
}
}
}
onReachBottom(function () {
console.log('已经到底部啦!')
})
