滚动(scroll)tips
7.31'23
介绍
滚动是常见的交互方式。包含页面、容器、元素,滚动距离、滚动条等概念。
滚动距离关系
Element.scrollTop
是有滚动条元素的垂直滚动距离。用来表示元素顶部到已滚动内容顶部的距离。当元素在顶部或没有滚动条时,值为0
。
可交互的例子
图片示例
场景
元素滚动到顶部
offsetTop 是当前元素到父元素(offsetParent)的相对距离。使用offsetTop
属性和 scrollTo
方法。
// 需要滚动到顶部的元素
const dom = document.querySelector('.class');
container.scrollTo({
top: dom.offsetTop,
behavior: 'smooth',
});
直接控制容器的滚动条
const container = document.querySelector('.container')
container.scrollTop = top;
offsetParent order
- the nearest positioned ancestor element
- td, th, table
- body
<body>
如果设置了overflow-x: hidden
,会导致滚动失效。需要去掉该样式。
让容器滚动到底部
const dom = document.querySelector('.class')
dom.scrollTop = dom.scrollHeight - dom.clientHeight;
判断元素接近底部
const div = document.getElementById(id);
if (div.scrollHeight - div.scrollTop - div.clientHeight < 1) {
console.log('near bottom!');
}
// 针对 window 和 document.body
const innerHeight = window.innerHeight // 或者 document.body.clientHeight
if (document.body.scrollHeight - window.scrollY - innerHeight < 100) {
console.log('near bottom!');
}
判断元素的位置
在滚动过程中,可能需要确定某个元素所处的位置,例如接近顶部。可以使用getBoundingClientRect()方法,获取到 viewport 的绝对距离。
scrollElement.addEventListener('scroll', event => {
const target = document.getElementById(id);
const rect = target.getBoundingClientRect();
if (rect.top < 100) {
// near top
}
if (rect.bottom > 800) {
// near bottom
}
}, { passive: true });
跨平台滚动(手机和桌面等)
移动端(webview):window.scrollTo(x, y)
浏览器:window.scrollTo(options)
if (platform === 'app') {
window.scrollTo(0, top);
} else {
window.scrollTo({
top,
behavior: 'smooth',
});
}
touch events
touchmove
, touchstart
, touchend
等事件,在移动平台也可以用来检测页面滚动(pageY)或滑动(pageX)
element.addEventListener('touchstart', event => {
// event.changedTouches[0].pageY
});
element.addEventListener('touchend', event => {
// event.changedTouches[0].pageY
});
element.addEventListener('touchmove', event => {
// event.touches[0].pageY
});
提升滚动性能
Passive event listeners: 当确定不会调用 preventDefault 时,设置被动式监听事件,可以显著提升浏览器的滚动性能。
Throttle/Debounce: 可以设置响应函数的调用间隔。
target.addEventListener(type, listener, { passive: true });
Improving scrolling performance with passive listeners
ios Modal 滚动卡顿解决方案
overflow: scroll;
-webkit-overflow-scrolling: touch;
<<<<<<< Updated upstream
滚动距离关系
Element.scrollTop
是有滚动条元素的垂直滚动距离。用来表示元素顶部到已滚动内容顶部的距离。当元素在顶部或没有滚动条时,值为0
。
可交互的例子
图片示例
Stashed changes
📖