scrolllab.WEBVIEW EXPERIMENT / 001

一个关于滑动的小实验

滑动之间,
接住你的下一步。

向上滑动约 200px,松手后自动接管。
再向下滑动,看看页面自己的顶部栏。

↑
向上滑动开始SCROLL TO EXPLORE
01 — 03

01 / 自然浏览

先让页面,
自由地滚动。

刚打开时,使用网页原本的滚动。像平常一样向上滑,给 Facebook / Instagram 的系统工具栏留出收起的机会。

↑
继续往上滑动一点
保持平常的阅读手势就好

02 / 无缝接管

画面停在原处,
内容接着往前。

接管后,外层固定为一屏高度,长内容在容器里面继续滚动。切换会保留当前阅读位置。

03 / 自定义交互

现在,
往下滑回来。

页面的顶部栏会跟随你的手势出现。点击左侧 ×,触发我们自己的关闭回调,试试打开一个挽留弹层。

继续向上滑,顶部栏会再次收起。

THE FLOW CONTINUES

你的页面。
你的下一步。

再滑动几次,感受顶部栏的出现与收起。上滑后松手,自动执行与按钮相同的接管。左下角可以查看状态或重新开始。

SCROLL LAB / 实验状态

看看滑动背后。

先保持原生页面滚动。向上滑动达到 200px,松手 180ms 后自动执行与“立即接管”相同的逻辑,不依赖视口增高;也可点击按钮立即接管。网页不能控制 Facebook / Instagram 系统栏,当前为待真机验证的实验。

原生滚动对照(完全不接管) ↗

CUSTOM CLOSE HOOK
↗

这次关闭,
由你的页面接住。

已触发自定义关闭回调 1 次。你可以在这里接入挽留弹层、埋点或自己的跳转逻辑。

此 × 属于网页,不会关闭宿主 App 的 WebView。