Browse Source

feat: 更新样式以支持导航面板内部滚动并调整页面布局

master
peijunlei 3 weeks ago
parent
commit
d73c188e0f
  1. 5
      public/themes/dist_static/static/css/common.css
  2. 3
      public/themes/dist_static/static/js/common.js

5
public/themes/dist_static/static/css/common.css

@ -1297,6 +1297,7 @@ body {
z-index: 2; z-index: 2;
display: grid; display: grid;
grid-template-rows: 0fr; grid-template-rows: 0fr;
max-height: calc(100dvh - var(--header-h));
visibility: hidden; visibility: hidden;
background: var(--color-white); background: var(--color-white);
border-top: 1px solid rgb(223, 224, 226); border-top: 1px solid rgb(223, 224, 226);
@ -1305,6 +1306,10 @@ body {
}.nav-mega__inner { }.nav-mega__inner {
overflow: hidden; overflow: hidden;
min-height: 0; min-height: 0;
}.site-header__nav-item:hover .nav-mega__inner {
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}.nav-mega__dropdown-content.product { }.nav-mega__dropdown-content.product {
display: grid; display: grid;
min-height: 45rem; min-height: 45rem;

3
public/themes/dist_static/static/js/common.js

@ -147,6 +147,9 @@ $(function() {
$(this).attr("aria-expanded", !isExpanded); $(this).attr("aria-expanded", !isExpanded);
}); });
// Lenis.stop() 会 preventDefault 所有滚轮;面板需 data-lenis-prevent 才能内部滚动
$(".nav-mega").attr("data-lenis-prevent", "");
// hover 展开 mega 面板时禁止/恢复页面滚动 // hover 展开 mega 面板时禁止/恢复页面滚动
$(".site-header__nav-item--mega").on("mouseenter", function() { $(".site-header__nav-item--mega").on("mouseenter", function() {
if ($("body").hasClass("is-mask-open")) return; if ($("body").hasClass("is-mask-open")) return;

Loading…
Cancel
Save