fix(ui): 修正 mini 页滚动——补 flex 链条 min-height:0,滚动交给内容框
上一版只把 body 锁成 overflow:hidden,既没提供可滚动内层,也没让框收缩, 等于把超出视口的内容"藏起来"。用户直接指出:应当让框收缩到一屏刚好撑满。 根因:Dashy 的 DOM 链条是 .minimal-section-inner ← .item-group-container ← .minimal-home ← div ← div ← body 中间两层无名 wrapper 没有 min-height:0,flex 项无法压缩 → 容器被内容撑高, 既撑出页面(已锁住)又不产生内部滚动。 本版: - body(:has(.minimal-home)) 锁 100dvh,并把中间两层 wrapper 也设为 flex:1 + min-height:0 + max-height:100% + overflow:hidden(补齐链条) - 滚动显式交给 .minimal-home > .item-group-container(flex:1 + min-height:0 + overflow-y:auto + padding-bottom 84px 给底部悬浮件/备案号留净空) - .minimal-section-inner 不再自成滚动区(overflow:visible),避免双层滚动条
This commit is contained in:
41
web/navi.css
41
web/navi.css
@ -713,39 +713,56 @@ html[data-theme] .minimal-headings-wrap .tab-scroll-btn {
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
/* ── mini 页:视口高度自适应 + 框内滚动 ──
|
||||
实测问题:.minimal-section-inner 是 max-height:none/overflow:visible,
|
||||
内容一多就把整页撑高,滚动落在页面上;而不同分组内容多少不同,
|
||||
于是"有的页面能滚、有的不能",观感割裂。
|
||||
做法:body 锁死视口高度不滚,页面主体改为纵向 flex,
|
||||
内容框 flex:1 + min-height:0 + overflow-y:auto —— 滚动统一发生在框内。
|
||||
仅作用于含 .minimal-home 的页面(用 :has 限定),不影响首页/工作区。 */
|
||||
/* ── mini 页:一屏刚好撑满 + 框内滚动(修正版)──
|
||||
上一版只锁了 body 的 overflow,却没有可滚动的内层,也没让框收缩:
|
||||
结果内容被"藏起来"。根因是 flex 链条上有两层无名 wrapper(div ← div)
|
||||
没有 min-height:0,容器因此无法压缩、只会被内容撑高。
|
||||
这一版把链条每一环都补齐,并把滚动显式交给内容框。 */
|
||||
html[data-theme] body:has(.minimal-home) {
|
||||
height: 100dvh !important;
|
||||
max-height: 100dvh !important;
|
||||
overflow: hidden !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
/* flex 链条上的中间 wrapper(Dashy 的 #app / 包装 div)必须允许压缩 */
|
||||
html[data-theme] body:has(.minimal-home) > div,
|
||||
html[data-theme] body:has(.minimal-home) > div > div {
|
||||
flex: 1 1 auto !important;
|
||||
min-height: 0 !important;
|
||||
max-height: 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
html[data-theme] .minimal-home {
|
||||
flex: 1 1 auto !important;
|
||||
min-height: 0 !important;
|
||||
max-height: 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
/* 内容外框与内框都给到"可压缩 + 可滚动",并给底部悬浮件/备案号留出净空 */
|
||||
html[data-theme] .minimal-home > .item-group-container,
|
||||
html[data-theme] .minimal-home .minimal-section-inner {
|
||||
/* 内容外框:吃掉剩余高度,自己滚 */
|
||||
html[data-theme] .minimal-home > .item-group-container {
|
||||
flex: 1 1 auto !important;
|
||||
min-height: 0 !important;
|
||||
max-height: 100% !important;
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
overscroll-behavior: contain !important;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 84px !important;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
/* 极窄/极矮屏:内容框内滚动尤其重要,额外收紧上下留白 */
|
||||
/* 内框不再自成滚动区(避免双层滚动条),只负责高度不满时撑开 */
|
||||
html[data-theme] .minimal-home > .item-group-container > .minimal-section-inner {
|
||||
min-height: 0 !important;
|
||||
overflow: visible !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
@media (max-height: 560px) {
|
||||
html[data-theme] .minimal-home .minimal-section-inner { padding-bottom: 64px !important; }
|
||||
html[data-theme] .minimal-home > .item-group-container { padding-bottom: 64px !important; }
|
||||
}
|
||||
|
||||
html[data-theme] .minimal-section-inner {
|
||||
|
||||
Reference in New Issue
Block a user