浏览器原生支持平滑滚动

栏目: CSS · 发布时间: 6年前

内容简介：原文地址：浏览器从去年年底开始，已经开始支持浏览器的原生平滑滚动定位，CSS

原文地址： www.zhangxinxu.com/wordpress/?…

浏览器从去年年底开始，已经开始支持浏览器的原生平滑滚动定位，CSS scroll-behavior 属性和JS scrollIntoView() 方法都可以。

一、CSS scroll-behavior与平滑滚动

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

我们先看一个实际的案例。

8年前“ 无JavaScript纯CSS实现选项卡轮转切换效果 ”这篇文章介绍了一种利用锚点定位纯CSS实现选项卡切换的技术（本质上是触发滚动条滚动）。

可以狠狠地点击这里：无JavaScript实现的切换效果demo

实现后的效果参见下GIF截屏：

浏览器原生支持平滑滚动

基本功能可以满足，但有两个问题，一是由于改变location的hash实现的定位，会触发浏览器原生滚动行为，体验不好；二是选项卡内容的切换“邦邦邦”过于生硬。

于是，后来，我发明了一种基于控件元素focus触发滚动重定位的特性实现的纯CSS选项卡切换效果，在《CSS世界》这本书overflow章节有提到，您可以狠狠的点击这里： focus锚点定位和overflow的选项卡切换demo

浏览器原生支持平滑滚动

也是纯CSS实现，没有任何JavaScript代码，相比直接利用 <a> 元素的 href 锚点跳转方法，此方法不会触发浏览器外部窗体的滚动，体验更上一层楼，但是还有一个问题，那就是选项卡内容切换的时候，还是“邦邦邦”这种干巴巴的效果，并没有滑来滑去那种湿湿的效果。

不要担心，现在有了CSS scroll-behavior，则平滑滚动的问题也可以解决了。您可以狠狠地点击这里： CSS scroll-behavior选项卡平滑滚动demo

相比之前干巴巴的实现，就多了这么一句CSS—— scroll-behavior:smooth ：

.box {
    scroll-behavior: smooth; 
    overflow: hidden; 
}复制代码

结果一股如沐春风的交互效果扑面而来，参见下面视频截屏效果（掘金文章不支持嵌入视频，可去原文查看），或者脑补下面的静态图：

浏览器原生支持平滑滚动

更简单更实际的用途

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

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

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

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

html, body { scroll-behavior:smooth; }复制代码

此时，点击如下代码所示的“返回顶部”链接，就会平滑滚动到顶部。

<a href="#">返回顶部</a>复制代码

从这一点来看，业界浏览器的CSS reset都可以加上这么一条规则：

html, body { scroll-behavior:smooth; }复制代码

二、JS scrollIntoView与平滑滚动

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

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

语法如下：

target.scrollIntoView({
    behavior: "smooth"
});复制代码

我们随便打开一个有链接的页面，把首个链接滚动到屏幕外，然后控制台输入类似下面代码，我们就可以看到页面平滑滚动定位了：

document.links[0].scrollIntoView({
    behavior: "smooth"
});复制代码

如下视频截屏：

其它：

scrollIntoView() 升级后的方法，除了支持 'behavior' ，还有 'block' 和 'inline' 等参数，有兴趣可以参阅MDN相关文档。
如果我们的网页已经通过CSS设置了 scroll-behavior:smooth 声明，则我们直接执行 target.scrollIntoView() 方法就会有平滑滚动，无需再额外设置 behavior 参数。例如，如果你是在鑫空间原站浏览的此文章，打开控制台，执行下面代码，就可以看到平滑滚动效果了：
```
document.forms[0].scrollIntoView();复制代码
```

三、JS平滑滚动向下兼容处理

JS实现平滑滚动并不难，jQuery中 animate() 方法：

scrollContainer.animate({
    scrollTop: 0
});复制代码

或者使用 requestAnimationFrame API 这类原生JS也能实现。例如下面这个我速写的个方法：

/**
 @description 页面垂直平滑滚动到指定滚动高度
 @author zhangxinxu(.com)
*/
var scrollSmoothTo = function (position) {
    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            return setTimeout(callback, 17);
        };
    }
    // 当前滚动高度
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 滚动step方法
    var step = function () {
        // 距离目标滚动距离
        var distance = position - scrollTop;
        // 目标滚动位置
        scrollTop = scrollTop + distance / 5;
        if (Math.abs(distance) < 1) {
            window.scrollTo(0, position);
        } else {
            window.scrollTo(0, scrollTop);
            requestAnimationFrame(step);
        }
    };
    step();
};复制代码

使用的是自己私藏缓动动画JS小算法，滚动先快后慢。

使用如下，例如，我们希望网页平滑滚动到顶部，直接：

scrollSmoothTo(0);复制代码

就可以了。

难的是如何支持平滑滚动的浏览器原生处理，不支持的浏览器还是使用老的JS方法处理。例如IE浏览器和Safari目前尚未支持原生平滑滚动。

浏览器原生支持平滑滚动

需要分别处理，我的JS判断处理如下：

if (typeof window.getComputedStyle(document.body).scrollBehavior == 'undefined') {
   // 传统的JS平滑滚动处理代码...
}复制代码

这样就可以无缝对接了。

（本文完）

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Writing Apache Modules with Perl and C

Lincoln Stein、Doug MacEachern / O'Reilly Media, Inc. / 1999-03 / USD 39.95

Apache is the most popular Web server on the Internet because it is free, reliable, and extensible. The availability of the source code and the modular design of Apache makes it possible to extend Web......一起来看看《Writing Apache Modules with Perl and C》这本书的介绍吧!

码农工具