加入官方微信群

使用微信扫描二维码
或搜索 weweloo 添加微信好友

返回
网页编辑器
MooKwai特色块平滑滚动容器

平滑滚动容器

平滑滚动容器(Scroll Smoother)提供页面平滑滚动的交互效果。

文章目录

区块

内容

区块内可插入任何类型其他区块,建议该区块作为页面的父元素使用。

配置选项

基本设置

全局样式

Select 区块对应的全局块样式。

Html 标签

Select 区块根元素的 Html 标签类型。

交互设置

平滑度

Number 滚动的平滑度,相当于到达原生滚动位置所话费的时间,默认为 0.8s 。

视差滚动

Boolean 开启该选项后,可通过设置子元素的 HTML 属性来实现视差滚动效果,支持的 HTML 属性为 data-speed(速度) 和 data-lag(延时)。

<div data-speed="1" data-lag="0.6">...</div>

元素

Array 模糊滚动容器内支持使用视差滚动效果的元素,如不设置或为空时则默认为模糊滚动容器内的所有子元素。

元素

<div class="mk-smoother">
  <div class="el-wrap">...内部区块</div>
</div>
  • 主容器 .mk-smoother

其他

  • 一个页面中建议最多仅使用1个平滑滚动区块;
  • 如在模板中已经加入平滑滚动区块,调用该模板的页面无需再重新添加;
  • 如区块内含固定在屏幕内的元素(position: fixed),该固定效果将失效。

使用微信扫描二维码
或搜索 weweloo 添加微信好友

加微信
进群聊聊(๑•̀ㅂ•́) ✧