页面平滑滚动的体验提高

时间 2019-11-10

标签页面平滑滚动体验提高繁體版

原文原文链接

scroll-behavior属性和JS scrollIntoView()方法php

自己做为体验提高的手段，用css

<a href="#" rel="internal">返回顶部</a>

兼容性就能够不用考虑太多html

不支持就直接回去呗浏览器

用法：spa

scroll-behavior:smooth写在滚动容器元素上，能够让容器（非鼠标手势触发）的滚动变得平滑。code

demo:https://www.zhangxinxu.com/study/201810/css-scroll-behavior.phphtm

其实scroll-behavior的使用没有那么多花头，你就记住这么一句话——blog

凡是须要滚动的地方都加一句scroll-behavior:smooth就行了！get

你别管他用不用获得，也不用管浏览器兼容性如何，你都加上。这就像一个不要钱的免费抽奖，没有中奖，不要紧，又没什么损失，中奖了天然好，锦上添花！scroll-behavior:smooth就是这种尿性。io

举个例子，在PC浏览器中，网页默认滚动是在<html>标签上的，移动端大多数在<body>标签上，因而，我加上这么一句：

html, body { scroll-behavior:smooth; }

scrollIntoView()方法

DOM元素的scrollIntoView()方法是一个IE6浏览器也支持的原生JS API，能够让元素进入视区，经过触发滚动容器的定位实现。

随着Chrome和Firefox浏览器开始支持CSS scroll-behavior属性，顺便对，scrollIntoView()方法进行了升级，使支持更多参数，其中一个参数就是能够使滚动平滑。

语法以下：

target.scrollIntoView({
    behavior: "smooth"
});