smoothscroll.js 页面平滑滚动插件

  • Z时代
  • 2024-01-10
  • 分类：IT

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

相关链接

  • https://github.com/iamdustan/smoothscroll

  • http://iamdustan.com/smoothscroll/

  • https://npmjs.org/smoothscroll-polyfill

以上是 smoothscroll.js 页面平滑滚动插件 的全部内容， 来源链接： utcz.com/p/232599.html

回到顶部