先贴学习的文章你也许不知道的浏览器的一些"滚动"行为。
控制滚动的方法
scrollTo
滚动到哪个位置
// 第一个参数是往左多少px,第二个是往下滚动
window.scrollTo(0, 0);
// 或者传个对象
window.scrollTo({
left: 0,
top: 100
});
scrollBy
相对现在的位置滚动多少位置
window.scrollBy(0, 0);
// 或者传个对象
window.scrollBy({
left: 0,
top: 100
});
scrollTop
scrollTo在safari兼容性极差,建议用scrollTop。
可以设定或者读取滚动的位置
document.scrollingElement.scrollTop = 100;
scrollingElement
没有scroll的情况下,如果有子元素高度超过视图,浏览器在怪异模式和标准模式下都会设置不同的默认滚动元素,怪异模式是body,标准模式是html或者document。
之前要做个兼容
现在用scrollingElement拿就行
scrollIntoView
如果元素没有在视图中默认控制元素移动到视觉窗口的左端和顶端,如果元素在视图中,则左右不会滚动。
document.querySelector('.child').scrollIntoView();
还可以控制移动到屏幕的上中下端,左右滚动逻辑和上边一样。
// start出现在视口、center出现在视口中央、end出现在视口底部
document.querySelector(".box").scrollIntoView({
block: "start" || "center" || "end"
});
还可以用behavior: 'smooth'
平滑滚动
document.querySelector('.child').scrollIntoView({block:'center',behavior: 'smooth'});
也可以用css,不过ios也全线崩盘
scroll-behavior: smooth;
技巧
overscroll-behavior
safari全线不支持。。。阻止滚动传播
.box {
overscroll-behavior: contain; // 阻止滚动传播
}
横向滚动
父元素white-space: nowrap;
子元素display:block-line
或者父元素display:flex;flex-wrap: nowrap;或者white-space: nowrap;也可以
子元素flex: none;
横向滚动停止后让元素贴到指定位置
父元素scroll-snap-type: x mandatory;
子元素scroll-snap-align: start;
scroll-snap-type
的x表示横向捕捉,还有y竖向。
scroll-snap-align: start;
表示在捕捉在左上角。至于是左还是上,看父元素的scroll-snap-type: x mandatory;
是x还是y。
center表示中间,end表示结尾。
自己的一些心得
- 移动端ios滚动可以设置 -webkit-overflow-scrolling有顺滑的滚动回弹效果很舒服。设置为——touch。
- 如果把绝对定位的元素放到带scroll的元素里面,会在safari和一些低版本浏览器上发生各种意外的绘制错误。
- overflow为默认的情况下,子元素比父元素长会溢出,但是不影响外边布局。但是一个元素比父元素的父元素长的情况下,如果父元素设置为滚动,那也会按这个元素的长度出现滚动条。