看一篇关于浏览器滚动的文章做下笔记

先贴学习的文章你也许不知道的浏览器的一些"滚动"行为。

控制滚动的方法

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为默认的情况下，子元素比父元素长会溢出，但是不影响外边布局。但是一个元素比父元素的父元素长的情况下，如果父元素设置为滚动，那也会按这个元素的长度出现滚动条。