滾動內容形成的必要條件
CSS Overflow屬性解析
MDN官方文檔-Overflow屬性
菜鳥教程-Overflow屬性
overflow 屬性控制內容溢出元素框時在對應的元素區間內是否添加滾動條。
| 值 | 描述 |
|---|---|
| visible | 默認值。內容不會被修剪，會呈現在元素框之外。 |
| hidden | 內容會被修剪，并且其余內容是不可見的。 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
| inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
?? 重要注意事項：
- 僅對明確設置高度的塊級元素生效
- MacOS系統默認隱藏滾動條（需滑動時才會顯示，即使設置scroll值）
實現局部滾動需要滿足兩個核心條件：
- 容器具有確定的高度值（非auto）
- 設置
overflow: scroll或overflow: auto
典型問題場景分析
<!DOCTYPE html>
<head><style>* {margin: 0;padding: 0;}.nav {width: 100%;height: 64px;background: lightcoral;}.main {/*這里的100%應該為100vh*/height: calc(100% - 64px);background: lightblue;}.content {height: 1300px;}</style>
</head><body><nav class="nav"></nav><main class="main"><div class="content"></div></main>
</body>
</html>
看起main被設置了高度，滾動條應該出現在main內，但實際運行會發現滾動條還是在body上的。
原因是：默認情況下，html 和 body 的高度由內容撐開，而非視口高度。
- 當 .main 設置 height: calc(100% - 64px) 時，100% 繼承的是 body 的高度，而 body 的高度此時等于其內容高度（即 .nav 的 64px + .main 的內容高度），形成循環依賴。
所以解決辦法就是
- 給body或html設定高度為100vh，
- 或把
height: calc(100% - 64px)的100%設置為100vh
滾動條樣式
瀏覽器兼容
目前(2025/2/20)，推薦使用老的::-webkit-scrollbar屬性
因為新的屬性沒有舊的能改的多，像是圓角和hover之類
- scrollbar-color: initial;
- scrollbar-width
??注意：設置了新的scrollbar-color和scrollbar屬性會覆蓋老webkit屬性，導致webkit屬性失效
* {/* 平滑錨點跳轉時的滾動 */scroll-behavior: smooth;/*谷歌121版本后的新屬性與舊webkit-scrollbar沖突*/scrollbar-color: initial;scrollbar-width: initial;
}/* 針對所有元素的Webkit內核瀏覽器滾動條進行全局樣式設置 */
*::-webkit-scrollbar {height: 6px; /* 水平滾動條的高度 */width: 6px; /* 垂直滾動條的寬度 */
}/* 隱藏滾動條兩端的箭頭按鈕 */
*::-webkit-scrollbar-button {display: none; /* 不顯示滾動條按鈕 */
}/* 自定義滾動條滑塊樣式 */
*::-webkit-scrollbar-thumb {background-color: var(--scrollbar-color); /* 使用CSS變量定義滑塊顏色 */border-radius: 3px; /* 滑塊圓角（半徑是高度/寬度的一半） */
}/* 鼠標懸停時滑塊的樣式變化 */
*::-webkit-scrollbar-thumb:hover {background-color: var(--scrollbar-hover-color); /* 懸停時使用更醒目的顏色 */
}/*
注意事項：
1. 這些樣式僅在Webkit內核瀏覽器生效（Chrome/Safari/Edge等）
2. --scrollbar-color 和 --scrollbar-hover-color 是CSS變量，需在根元素定義
3. 通過調整 width/height 值可以改變滾動條粗細
4. border-radius 設置為尺寸的一半會呈現膠囊形狀
5. 通配符 * 表示應用于所有元素，可根據需要替換為特定選擇器
*/
![[ComfyUI]官方已支持Skyreels混元圖生視頻，速度更快，效果更好(附工作流）](http://pic.xiahunao.cn/[ComfyUI]官方已支持Skyreels混元圖生視頻，速度更快，效果更好(附工作流）)
)
)
