# 浏览器-滚动条行为

整理滚动相关的方法和属性。

# 分类

滚动分为全局滚动(浏览器窗口)和局部滚动(自定义盒子)。
全局滚动需调用window对象、局部滚动则需先获取指定的DOM再调用相应的API。

# 如何设置全局滚动条高度

最常用的方法

window.scrollTo(0, 0);

// or
window.scrollTo({
    left: 0,
    top: 100
});

也可以设置相对滚动

window.scrollBy(0, 100);

// or
window.scrollBy({
    left: 0,
    top: 100
});

或者利用scrollTop

document.scrollingElement.scrollTop = 100;

注意

scrollTo跟scrollBy的参数是一样的。
区别在于scrollBy的滚动距离是相对于当前滚动条的位置滚动。

# 如何指定一个元素显示在视窗

最常用的方法

// 获取元素的offsetTop(元素距离文档顶部的距离)
let offsetTop = document.querySelector(".box").offsetTop;

// 设置滚动条的高度
window.scrollTo(0, offsetTop);

利用锚点

<a href="#box">盒子出现在顶部</a>
<div id="box">我是锚点元素</div>

利用scrollIntoView展现

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

// 还可以指定元素的出现位置
document.querySelector(".box").scrollIntoView({
    block: "start" || "center" || "end"
});

# 如何设置滚动具有平滑的过渡效果

利用每个方法的参数设置

window.scrollTo({
    behavior: "smooth"
});

window.scrollBy({
    behavior: "smooth"
});

document.querySelector(".box").scrollIntoView({
    behavior: "smooth"
});

利用css属性设置

html {
    scroll-behavior: smooth;
}

/* 所有 */
* {
    scroll-behavior: smooth;
}

注意

设置该属性后，所有方法都不用设置behavior参数了。

# 其他有趣的知识点

# scrollingElement

该对象可以非常兼容地获取scrollTop、scrollHeight等属性，在移动端跟PC端都屡试不爽。

// 从前
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

// 现在
let scrollHeight = document.scrollingElement.scrollHeight;

# 滚动到底部

window.scrollTo({
    left: 0,
    top: document.scrollingElement.scrollHeight
});

// 或者懒人做法
window.scrollTo(0, 999999);

# 解决IOS设备局部滚动不顺畅(粘手)

除了浏览器原生滚动，自定义的滚动条都会出现滚动不顺畅的问题。
添加以下属性即可:

.box {
    -webkit-overflow-scrolling: touch;
}

# 滚动传播

指有多个滚动区域，当一个滚动区域滚动完之后，继续滚动会传播到父区域继续滚动的行为。

.box {
    /* 阻止滚动传播 */
    overscroll-behavior: contain;
}

# 滚动结束后，强制滚动到指定元素

应用场景: 轮播图、全屏滚动等。

ul {
    scroll-snap-type: x mandatory;

    li {
        scroll-snap-align: start;
    }
}

← 介绍字体 →