Skip to main content

Elementor Scroll Snap功能用法，实现页面滚动捕捉效果

Last updated: Dec 20, 2024

Elementor Scroll Snap功能

概述​

使用Elementor Scroll Snap功能实现页面滚动捕捉效果，通过一步简单的设置就能提升页面高级感。

Elementor Scroll Snap功能介绍​

Scroll Snap（滚动捕捉）效果可以让页面滚动时，捕捉并快速跳转到当下滚动的板块位置。

使得页面在滚动时就像放映PPT一样，呈现一种高级页面效果。

在Elementor中只需要在页面中开启Scroll Snap功能就能实现这一效果。

实现页面滚动捕捉效果​

首先通过Elementor打开需要设置滚动捕捉效果的页面。

点击页面上方的设置图标

设置Scroll Snap：

  • Snap Position：Top
  • Scroll Padding：50px
  • Scroll Snap Stop：Always

然后保存页面，我们来预览一下效果：

提示

为了能更明显看出效果，Well对每个板块设置了不同的背景色。

可以看到，当即将要滚动到下一板块的时候，页面自动就跳转到下一板块顶部。

我们再来进行另一种设置：

在原有设置基础项修改：

  • Snap Position：Center
  • Scroll Padding：0 px
提示

Well更喜欢这个效果，显得滚动更加顺滑一些。

下载资源​

| 资源类型 | 下载链接 | 说明 | |----------|------| | WordPress插件 | WordPress 插件下载 | WordPress 插件下载，合理使用插件丰富网站功能 | | 建站服务 | 外贸建站服务 | 提供专业外贸建站服务 | | 服务器推荐 | 外贸服务器推荐 | WordPress专用VPS、虚拟主机推荐 |