smoothscroll.js 页面平滑滚动插件

Question

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

安装

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

# 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' });

相关链接

• https://github.com/iamdustan/smoothscroll
• http://iamdustan.com/smoothscroll/
• https://npmjs.org/smoothscroll-polyfill