smoothscroll.js 页面平滑滚动插件 - 文章教程

smoothscroll.js 页面平滑滚动插件

发布于 2020-06-11 字数 2949 浏览 2927 评论 0

smoothscroll.js 是一款纯 JS 页面平滑滚动插件。该js页面平滑滚动插件的特点是页面滚动的行为被作为 window 对象的扩展,用户可以通过 window 对象直接调用平滑滚动的方法。

smoothscroll.js 页面平滑滚动插件

安装

在此处下载生产就绪文件并将其包含在项目中,或者将其作为包安装。

# npm
npm install smoothscroll-polyfill --save

# yarn
yarn add smoothscroll-polyfill

当在脚本标记中包含polyfill时,它将在加载后立即运行。

如果要将其作为依赖项导入,请确保调用polyfill方法:

import smoothscroll from 'smoothscroll-polyfill';

// kick off the polyfill!
smoothscroll.polyfill();

在这两种情况下,脚本都将检测规范是否受本机支持,并仅在必要时采取操作。

对于不支持该代码的浏览器,该代码需要requestAnimationFrame polyfill。

强制 polyfill 实现

如果希望始终重写本机滚动方法,请在需要模块或包含polyfill文件之前放置此全局变量。

window.__forceSmoothScrollPolyfill__ = true;

我们强烈建议不要这样做,除非你的项目强烈需要它。

浏览器兼容

  • natively supported in Chrome
  • natively supported in Firefox
  • Safari 6+
  • Internet Explorer 9+
  • Microsoft Edge 12+
  • Opera Next

API 方法

window.scroll or window.scrollTo

window.scroll({ top: 2500, left: 0, behavior: 'smooth' });

window.scrollBy

window.scrollBy({ top: 100, left: 0, behavior: 'smooth' });

window.scrollBy

window.scrollBy({ top: -100, left: 0, behavior: 'smooth' });

element.scrollIntoView

document.querySelector('.hello').scrollIntoView({ behavior: 'smooth' });

element.scroll or element.scrollTo

element.scroll({ top: 0, left: 0, behavior: 'smooth' });

element.scrollBy

element.scrollBy({ top: 100, left: 0, behavior: 'smooth' });

Scroll to top

window.scroll({ top: 0, left: 0, behavior: 'smooth' });

or

document.querySelector('header').scrollIntoView({ behavior: 'smooth' });

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论