scrolllab.WEBVIEW EXPERIMENT / 001

一个关于滑动的小实验

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

先向上滑动,让系统顶部栏自然收起。
再向下滑动,看看页面自己的顶部栏。

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

01 / 自然浏览

先让页面,
自由地滚动。

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

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

02 / 无缝接管

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

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

03 / 自定义交互

现在,
往下滑回来。

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

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

THE FLOW CONTINUES

你的页面。
你的下一步。

再滑动几次,感受顶部栏的出现与收起。系统栏收起后会自动尝试接管。左下角可以查看状态或重新开始。

SCROLL LAB / 实验状态

看看滑动背后。

先保持原生页面滚动。滑动达到 120px 且视口稳定增高后,才自动尝试接管;没有增高则继续保留原生滚动。网页不能控制 Facebook / Instagram 系统栏,当前为待真机验证的实验。

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

CUSTOM CLOSE HOOK
↗

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

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

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