简单盘点浏览器的几种滚动行为

原文地址

这两天了解到了浏览器的几个滚动相关的属性和方法。感觉还挺有意思的,而且几个属性、方法的结合使用,可以大大改善用户体验。 写篇文章“蜻蜓点水”地简单概述一下供大家了解,如果想深入研究,还请查阅更详尽的资料。

一, scroll-behavior: smooth

让页面或元素的滚动如丝般柔滑。

scroll-behavior: smooth | auto;

demo 🌰↓

看右下角↘

就一行代码:

html,
body {
	scroll-behavior: smooth;
}
document.scrollingElement.scrollTop = 0;
// or window.scrollTo(0, 0);

二, .scroll()、 .scrollTo()、 .scrollBy()、 .scrollIntoView()

几个滚动方法

同样,几个有关滚动的js方法也可以添加类似 scroll-behavior: smooth 的参数已达到平滑滚动效果 —— scroll、scrollTo、scrollBy、scrollIntoView(scrollIntoView 稍有不同,下面会单独说)。

scroll(x, y)、 scrollTo(x, y)、 scrollBy(x, y)标识分别沿着x和y轴滚动的距离。

它们还都可以以一个scrollOptions对象作为参数,

scrollOptions = {
  	top: 0,
  	left: 0,
  	behavior: 'smooth' //平滑滚动
};

demo 🌰↓

主要代码:

this.scrollWrapper.scrollTo({
	top: this.queryParams.top,
	left: this.queryParams.left,
	behavior: this.queryParams.smooth ? 'smooth' : 'auto'
});

三, .scrollIntoView()

让元素滚到可视区。

element.scrollIntoView(alignToTop);
element.scrollIntoView({
	block: 'start' | 'end' | 'center' | 'nearest', 
	inline: 'start' | 'end' | 'center' | 'nearest', 
	behavior: 'smooth' | 'auto'
});
  • alignToTop 一个Boolean值
  • true,默认值,相当于 scrollIntoViewOptions: {block: 'start', inline: 'nearest'},元素的顶端将和其所在滚动区的可视区域的顶端对齐
  • false,相当于 scrollIntoViewOptions: {block: 'end', inline: 'nearest'},元素的底端将和其所在滚动区的可视区域的底端对齐

demo 🌰↓

注意

从demo中可以看出,小红块的滚动也会导致整个页面的滚动,这一点的用户体验稍微差一点。不知道大家有没有办法解决这个问题,还望赐教...

四, overscroll-behavior: contain;

多滚动区域,滚动不传播。

overscroll-behavior: contain | auto | none;
overscroll-behavior-x: contain | auto | none;
overscroll-behavior-y: contain | auto | none;
  • auto - 默认。元素的滚动会传播给祖先元素。
  • contain - 阻止滚动链接,滚动不会传播给祖先。
  • none - 和 contain 效果一样。

demo 🌰↓

滚动到底感受一下~

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50

before

after

只需要在滚动容易上加一行代码:

overscroll-behavior: contain;

在此之前,张鑫旭大大就已经试图用js解决这个问题,猛点这里

五, scroll-snap-*

规范滚动元素的定位

demo 🌰↓

scroll-snap-type: y mandatory;

scroll-snap-type: y proximity;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

scroll-snap-type: x mandatory;

scroll-snap-type: x proximity;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

主要代码:

.container.y-mandatory {
    scroll-snap-type: y mandatory; 
}
.container.y-proximity {
    scroll-snap-type: y proximity;
}
.container.x-mandatory {
    scroll-snap-type: x mandatory;
}
.container.x-proximity {
    scroll-snap-type: x proximity;
}
.y > .scroll-item {
	scroll-snap-align: start;
}
.x > .scroll-item {
	scroll-snap-align: center;
}
  • mandatory: 强制,强制地定位到某个滚动元素
  • proximity:邻近,个人理解是:只有当某个滚动元素“足够”进入滚动容器的时候才会控制定位
  • 这两个概念在使用上略有差异,可以多看几个例子感受一下

这个属性还是很有用的,可以用纯CSS来实现各种多平滚动效果,这里只是简单地体验了一下。 更多例子见该文章

六, history.scrollRestoration

设置返回页面是否返回原滚动位置

在从页面跳转回来的时候,一般浏览器都会“贴心”地返回到该页面原来的滚动位置,该行为由 history.scrollRestoration 属性控制的,默认是“auto”,

若不想回到原来的位置,可将值设为“manual”,手动,即不返回原位置,而是手动返回,此时浏览器会返回到页面顶部。但据测试,“返回”都是瞬间的,即使设置了 scroll-behavior: smooth 也无效。

if ('scrollRestoration' in history) {
  	history.scrollRestoration = 'manual';
}

参考资料

欢迎关注

赏不赏,看您心情