Scroll Behavior

Scroll Behavior

API

Scroll Behavior 的作用是改变滑动容器的滑动效果

1
scroll-behavior: auto | smooth
  • auto

    默认值,滑动效果会比较生硬,页面会瞬间定位到对应位置

  • smooth

    页面平滑滑动到指定的位置

Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
<section>
<nav>
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
</nav>

<div class="scrolling-box smooth">
<section id="1">first section</section>
<section id="2">second section</section>
<section id="3">third section</section>
</div>
</section>
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
body {
background-color: #333;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}

section {
margin: 20px;
display: flex;
flex-direction: column;

nav {
background-color: #000;
display: block;
padding: 1em 0;
text-align: center;
width: 200px;

a {
color: #fff;
margin: 0 1em;
text-decoration: none;
}
}

.scrolling-box {
background-color: #eaeaea;
display: block;
height: 200px;
overflow-y: scroll;
text-align: center;
width: 200px;

&.smooth {
scroll-behavior: smooth;
}

.box {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
}
}

Demo

兼容性

image-20190424154104191

扩展

JS Scroll API 的平滑滑动

scroll() | scrollTo() | scrollBy()

scroll()scrollTo()scrollBy() 三个方法都是将元素滑动到指定坐标位置,均支持平滑滑动

1
2
3
4
5
6
7
8
scrollTo(x-coord, y-coord)
scrollTo(ScrollToOptions)

scrollTo(x-coord, y-coord)
scrollTo(ScrollToOptions)

scrollBy(x-coord, y-coord)
scrollBy(ScrollToOptions)
  • x-coord

    元素滑动结束后距离 x 轴最左侧的的偏移位置

  • y-coord

    元素滑动结束后距离 y 轴最顶部的偏移位置

  • ScrollToOptions

    指定滑动的位置以及滑动效果

    • top

      元素滑动结束后距离 y 轴最顶部的偏移位置

    • left

      元素滑动结束后距离 x 轴最左侧的的偏移位置

    • behavior

      滑动的效果,与 CSS 属性 scroll-behavior 的取值一样

scroll()、scrollTo()、scrollBy() 区别

scroll(100, 200) 将元素滑动到距离 x 轴左侧 200px 且距离 y 轴最顶部 200px 的位置

scrollTo(100, 200) 效果同 scroll(100, 200)

scrollBy(100, 200) 滑动元素使元素距离 x 轴左侧的距离增加 100px,距离 y 轴顶部距离增加 200px

scrollIntoView()

scrollIntoView 用于将元素滑动到视觉区域,该方法也可以支持平滑滑动的参数。

1
2
3
4
5
element.scrollIntoView();

element.scrollIntoView(alignToTop); // Boolean parameter

element.scrollIntoView(scrollIntoViewOptions); // Object parameter
  • alignToTop

    布尔值,表示是否将元素滑动至视觉区域顶部

    1
    2
    3
    element.scrollIntoView(true)  <=> element.scrollIntoView({ block: 'start', inline: 'nearest' });

    element.scrollIntoView(true) <=> element.scrollIntoView({ block: 'end', inline: 'nearest' });
  • scrollIntoViewOptions

    指定滑动的位置以及滑动效果

    • behavior

      滑动的效果,与 CSS 属性 scroll-behavior 的取值一样

    • block

      指定元素滑动结束后在垂直方向的位置,可选值为 startendcenternearest;默认值为 start

    • inline

      指定元素滑动结束后在水平方向的位置,可选值为 startendcenternearest;默认值为 nearest

overscroll-behavior

overscroll-behavior 属性用于控制浏览器在滑动到顶部或底部时的行为。

Scroll boundaries && scroll chaining

通过情况下,在滑动容器中滑动到底部或顶部(滑动边界(Scroll Boundaries))时滑动会停止;但如果滑动容器的父级也允许滑动,会继续在父级滑动容器滑动,这种效果称为滑动链(Scroll Chaining),效果与 JS 中事件冒泡类似,具体的效果如下:

pull-to-refresh

下拉刷新效果在移动端比较常见,但是有些时候业务有自己定制的下拉刷新,需要禁止原生的下拉刷新。

Twitter PWA 版本的自定义下拉刷新:

Chrome Android 版的原生下拉刷新:

如上图,Chrome Android 中原生的下拉刷新是刷新整个页面,与 Twitter 的下拉刷新效果完全不一样。

API

1
overscroll-behavior: [ contain | none | auto ]{1,2}
  • auto

    默认值,元素的滑动会传播给祖先元素

  • contain

    阻止元素的祖先元素滑动,禁止传播效果

  • none

    阻止元素本身及祖先元素的滑动

Demo

阻止 fixed 定位元素的滑动传播

默认效果:

设置 overscroll-behavior: contain

禁止原生的下拉刷新

1
2
3
html, body {
overscroll-behavior-y: contain;
}

禁止炫光和回弹效果

1
2
3
body {
overscroll-behavior-y: none;
}

默认效果:

设置 overscroll-behavior: none

参考