felixarntz / fast-smooth-scroll
此轻量级插件通过启用锚点链接的平滑滚动来增强用户体验,无需jQuery或其他依赖项。
Requires
- php: >=5.2
- composer/installers: ~1.0
Requires (Dev)
- wp-phpunit/wp-phpunit: ^5.0 || ^6.0
- yoast/phpunit-polyfills: ^1.0
This package is auto-updated.
Last update: 2024-09-03 04:19:44 UTC
README
快速平滑滚动
此轻量级插件通过启用锚点链接的平滑滚动来增强用户体验,无需jQuery或其他依赖项。
此插件采用一种 无额外功能的做法 来实现平滑滚动,提供 快速、性能强劲且易于访问的用户体验。
只需启用插件,任何锚点链接(即指向同一页面上其他内容的链接)都将提供平滑的滚动体验,而不是突然跳转到目标内容。
插件依赖于使用 CSS 的最新平滑滚动技术。包含一个非常 快速且轻量级的 JavaScript polyfill (<1KB),以同样支持包括 Internet Explorer 在内的旧浏览器。因此,您可以放心,此插件涵盖了您的用户群。
为什么这个插件存在呢?
平滑滚动是增强用户体验的基本功能,因此它不应该带来损害用户体验的其他方面的性能成本。
其他一些平滑滚动解决方案不幸地依赖于过时的技术,如 jQuery,这可能会损害您网站的性能,而提供此功能实际上并不需要 jQuery。即使 10 年前的浏览器也不需要 jQuery 来实现平滑滚动。事实上,截至今天,您可以通过仅使用 CSS 就可以实现这种行为,甚至不需要任何 JavaScript。
使用此插件而不是其他平滑滚动解决方案的另一个潜在原因是可访问性:此插件尊重用户的减少运动偏好,这可以避免那些患有 前庭运动障碍 的人的不适。
您可能已经使用了一个平滑滚动插件,但值得检查它是否没有使用那些过时、低效且不可访问的方法,这些方法可能会减慢您的网站速度或对用户交互产生负面影响。
更多技术细节
此插件仅通过 scroll-behavior
CSS 属性启用平滑滚动。该属性已被所有现代浏览器支持了几年。
为了支持旧浏览器,包含了一个轻量级的 JavaScript polyfill,它只针对缺乏对该 CSS 属性支持的浏览器进行加载,且不依赖任何其他依赖项。polyfill 使用最新的 JavaScript 用户体验最佳实践,如 requestAnimationFrame
,以提供平滑的滚动体验,而不会阻塞其他用户交互。
有关相关浏览器支持,请参阅
- CSS Scroll-behavior
- CSS属性:scroll-padding-top
- prefers-reduced-motion 媒体查询
- requestAnimationFrame
- 高分辨率时间 API
- NodeList API
- Window API:scrollTo
安装和使用
您可以从 WordPress 插件仓库 下载最新版本。
有关安装的详细信息,请参阅 插件仓库安装说明;有关使用和定制的详细信息,请参阅 插件仓库常见问题解答。
或者,如果您使用 Composer 来管理您的 WordPress 网站,您也可以从 Packagist 安装此插件
composer require felixarntz/fast-smooth-scroll:^1.0
贡献
如果您有改进插件或解决 bug 的想法,请在这里的 GitHub 上提出问题或提交拉取请求。请参阅 贡献指南 以获取更多信息并开始。
您还可以通过翻译来为插件做出贡献。只需访问 translate.wordpress.org 即可开始。