前端学习笔记

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

原文地址

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

一， scroll-behavior: smooth

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

scroll-behavior: smooth | auto;
1

demo 🌰↓

看右下角↘

回到顶部

就一行代码：

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

二， .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' //平滑滚动
};
1
2
3
4
5

demo 🌰↓

主要代码：

this.scrollWrapper.scrollTo({
	top: this.queryParams.top,
	left: this.queryParams.left,
	behavior: this.queryParams.smooth ? 'smooth' : 'auto'
});
1
2
3
4
5

三， .scrollIntoView()

让元素滚到可视区。

element.scrollIntoView(alignToTop);
element.scrollIntoView({
	block: 'start' | 'end' | 'center' | 'nearest', 
	inline: 'start' | 'end' | 'center' | 'nearest', 
	behavior: 'smooth' | 'auto'
});
1
2
3
4
5
6
  • 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;
1
2
3
  • 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;
1

在此之前，张鑫旭大大就已经试图用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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  • mandatory： 强制，强制地定位到某个滚动元素
  • proximity：邻近，个人理解是：只有当某个滚动元素“足够”进入滚动容器的时候才会控制定位
  • 这两个概念在使用上略有差异，可以多看几个例子感受一下

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

六， history.scrollRestoration

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

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

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

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

参考资料

最近更新: 4/23/2019, 11:11:51 PM

← 利用 mammoth.js 实现前端 word 文档预览 →