diff --git a/public/themes/dist_static/static/css/common.css b/public/themes/dist_static/static/css/common.css index e2aec54..f45150e 100644 --- a/public/themes/dist_static/static/css/common.css +++ b/public/themes/dist_static/static/css/common.css @@ -309,7 +309,17 @@ body { }html { font-size: 16Px; scrollbar-gutter: stable; -}body { +} +/* 覆盖 Lenis 默认 overflow:clip,尽量保住滚动条 */ +html.lenis.lenis-stopped { + overflow: auto !important; +} +/* 若滚动条仍消失:只收窄 fixed 头部,不改内容区宽度 */ +html.is-scroll-locked .site-header { + width: auto; + right: var(--scroll-lock-compensation, 0px); +} +body { overflow-x: hidden; font-family: "MiSans VF", "PingFang SC", sans-serif; color: var(--color-text); diff --git a/public/themes/dist_static/static/js/common.js b/public/themes/dist_static/static/js/common.js index 46a695a..e99cb9f 100644 --- a/public/themes/dist_static/static/js/common.js +++ b/public/themes/dist_static/static/js/common.js @@ -147,16 +147,41 @@ $(function() { $(this).attr("aria-expanded", !isExpanded); }); - // Lenis.stop() 会 preventDefault 所有滚轮;面板需 data-lenis-prevent 才能内部滚动 + // Lenis.stop() 会加 .lenis-stopped { overflow: clip },经典滚动条(如360)消失后 + // fixed 头部会变宽;内容区通常不变。只补偿头部,不给 html/body 加 padding。 + function getScrollbarWidth() { + return Math.max(0, window.innerWidth - document.documentElement.clientWidth); + } + function lockPageScroll() { + const root = document.documentElement; + if (root.classList.contains("is-scroll-locked")) return; + const sbw = getScrollbarWidth(); + root.style.setProperty("--scroll-lock-compensation", `${sbw}px`); + root.classList.add("is-scroll-locked"); + lenis.stop(); + // 若 CSS 已保住滚动条,则清零补偿,避免头部被多余收窄 + requestAnimationFrame(() => { + if (getScrollbarWidth() > 0) { + root.style.setProperty("--scroll-lock-compensation", "0px"); + } + }); + } + function unlockPageScroll() { + const root = document.documentElement; + if (!root.classList.contains("is-scroll-locked")) return; + root.classList.remove("is-scroll-locked"); + root.style.removeProperty("--scroll-lock-compensation"); + lenis.start(); + } + $(".nav-mega").attr("data-lenis-prevent", ""); - // hover 展开 mega 面板时禁止/恢复页面滚动 $(".site-header__nav-item--mega").on("mouseenter", function() { if ($("body").hasClass("is-mask-open")) return; - lenis.stop(); + lockPageScroll(); }).on("mouseleave", function() { if ($("body").hasClass("is-mask-open")) return; - lenis.start(); + unlockPageScroll(); }); }); //#endregion diff --git a/public/themes/static_new/styles/base.css b/public/themes/static_new/styles/base.css index e7c10ae..b8a71b4 100644 --- a/public/themes/static_new/styles/base.css +++ b/public/themes/static_new/styles/base.css @@ -6,6 +6,13 @@ html { font-size: 16px; scrollbar-gutter: stable; } +html.lenis.lenis-stopped { + overflow: auto !important; +} +html.is-scroll-locked .site-header { + width: auto; + right: var(--scroll-lock-compensation, 0px); +} html,body{ width: 100%; height: 100%;