页面平滑滚动的体验提升

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

scroll-behavior浏览器兼容性

本身作为体验提升的手段,用

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

兼容性就可以不用考虑太多

不支持就直接回去呗

用法:

scroll-behavior:smooth写在滚动容器元素上,可以让容器(非鼠标手势触发)的滚动变得平滑。

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

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

凡是需要滚动的地方都加一句scroll-behavior:smooth就好了!

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

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

html, body { scroll-behavior:smooth; }

scrollIntoView()方法

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

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

语法如下:

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

猜你喜欢

转载自my.oschina.net/u/2367690/blog/2250465