/* * 全屏滚动 —— 共用的一屏一块吸附 * * 没用 fullPage.js：那套要接管整个文档滚动，会跟站上的吸顶大导航、右侧固定联系栏打架， * Elementor 的容器懒加载也依赖文档滚动派发 e-lazyloaded（渐变/背景图会失效）； * 而且它是 GPLv3 / 商业双授权，商业站得单独买。 * 这里用原生 scroll-snap：只往 上挂一个类，别的什么都不动。 * * 用法：想参与吸附的区块根节点加 .astra-snap-section， * 页面上够两块时 assets/js/fullpage.js 会给 挂上 .astra-snap。 * 吸顶导航的高度由脚本量出来写进 --snap-offset。 */ html.astra-snap { scroll-padding-top: var(--snap-offset, 78px); scroll-behavior: smooth; } /* CSS 这层吸附只是兑底（脚本没接管时）。 proximity 而不是 mandatory：比一屏高的板块能正常滚过去，不会被卡住。 脚本接管时会挂 .astra-snap-js，这条就不生效，免得两套机制互相拽。 */ html.astra-snap:not(.astra-snap-js) { scroll-snap-type: y proximity; } /* 脚本在翻屏时挂这个类：让它自己的补间说了算， 不让 proximity 半路把人拽回起点，也不让 scroll-behavior 重复平滑一次 */ html.astra-snap.is-astra-moving { scroll-snap-type: none; scroll-behavior: auto; } html.astra-snap .astra-snap-section { scroll-snap-align: start; scroll-snap-stop: normal; } /* 擑满一屏只在开着吸附的宽屏做。 窄屏那边不能反过来写 min-height:0： 这条选择器权重比区块自己的 min-height 高，会把 banner 压成内容高 */ @media (min-width: 1201px) { html.astra-snap .astra-snap-section { min-height: calc(100svh - var(--snap-offset, 78px)); } } /* 短板块撑满一屏后内容要纵向居中。 单拆一个类：banner 这类自己已经在居中的区块只加 .astra-snap-section， 不要被这里的 flex-direction:column 改掉它自己的对齐方式 */ .astra-snap-center { display: flex; flex-direction: column; justify-content: center; width: 100%; } /* 手机上板块普遍比一屏高得多，吸附只会碍事 */ @media (max-width: 1200px) { /* 选择器要和上面开吸附那条一模一样： 光写 html.astra-snap 权重低一级，压不过 :not(.astra-snap-js)，窄屏会白关 */ html.astra-snap:not(.astra-snap-js) { scroll-snap-type: none; } } @media (prefers-reduced-motion: reduce) { html.astra-snap { scroll-snap-type: none; scroll-behavior: auto; } }