diff --git a/static/css/style.css b/static/css/style.css index 32cb8c3..4b1e42f 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -43,7 +43,20 @@ body { /* ── 布局 ── */ .layout { display: grid; grid-template-columns: 340px 1fr; gap: 16px; padding: 16px 24px; align-items: start; } -.config-panel { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 72px; } +.config-panel { + display: flex; flex-direction: column; gap: 16px; + position: sticky; top: 72px; + /* 左侧独立滚动:面板固定视口高度,鼠标在左侧滚动时只翻左侧几个块,不带动右侧 */ + max-height: calc(100vh - 88px); + overflow-y: auto; + overscroll-behavior: contain; + padding-right: 6px; + scrollbar-width: thin; + scrollbar-color: var(--border) transparent; +} +.config-panel::-webkit-scrollbar { width: 8px; } +.config-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } +.config-panel::-webkit-scrollbar-thumb:hover { background: var(--accent); } .main { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .card { @@ -309,6 +322,6 @@ pre.json-box { @media (max-width: 1000px) { .layout { grid-template-columns: 1fr; } - .config-panel { position: static; } + .config-panel { position: static; max-height: none; overflow: visible; } .metrics { grid-template-columns: repeat(3, 1fr); } }