2019 年时，我的朋友荒村在《一次触发，遍地开花》首次提出了 SVG 融媒体交互设计场景下的双层触发。时至今日，它已演变为包括多重指令、CSS 结构带动、往返模型等多种丰富演绎。

而近来年开发者注意到，作为与 SVG 动画密切「组队」的<scroll>盒子溢出滚动属性，其实也具备某种意义上的「双层触发」，它本身作为 CSS 结构，同样符合 300 毫秒时间差前提下的关联感应，更不提<viewBox>直接属于滑动容器父子关系的条件下应用。

目前，第一种范式是已形成流行趋势的「预感应」滑动，以《免费定制SVG，难度不限（名额有限）》为例，每次滑屏将带动次屏大量的 SVG 编组动画依次展现：

同学们不妨从 E2 平台后期释出的简易版组件如「预感应等分容器滑动」、「预感应纵向无限图片滑动（默认飘入）」来分析，会发现其本质是次级盒子的<overflow: visible>带来了 SVG 内容物的溢出，由此使得触发器（如<rect>）前置，进而短暂提前引发动画的执行。

第二种范式是计育韬老师个人发明的新效果，在我与 Plastic SEA Fifi 合作的《祝您(用餐)愉快》项目中，首页存在一个即可滑动又可居中弹窗的全局橱窗，开辟了一种前所未有的交互模式：

在构建模型过程中，我先通过<mouseover>和<mouseout>的互斥指令部署了表层的弹窗效果，它完全脱离于下层的全局滑动区域并实际挡住后者。

那么在非点击前提下，拖动屏幕时如何「穿透」引起下方滑动布局的响应？接下来计育韬老师采用<touchmove>指令感应滑屏行为，并由此使得表面的互斥弹窗组在 300 毫秒内撤场。

旋即，滑动的行为被屏幕探测到并传递到了下层的全局滑动组，<scroll>的 CSS 基本特性随之感应，跟随手指行为进行正常的拖动表达。

就这两个范式来分析，本质其实类似于 touchstart-click 双层触发条件下多重指令和往返模型的区别——一组是正向利用技术规则，一组则反向利用技术规则。当然，肯定还存在更多奇妙的指令组合与 CSS 双层感应接力技术的策略，那么就期待同学们未来的精彩发挥了！