在css中，如何使滾動條不溢出圓角框是設計師和開發者常見的問題。特別是在設計用戶界面時，保持視覺效果的美觀和一致性至關重要。本文將詳細介紹如何通過調整CSS樣式，使滾動條隱藏在圓角框內，從而提升用戶體驗。
在設計小插件時，有時會在一個帶有圓角的小彈窗內設置一個小框，并在該小框內添加滾動條。然而，由于滾動條會溢出圓角框，導致視覺效果不佳，顯得突兀。為了解決這個問題，我們需要調整CSS樣式，使滾動條不會溢出圓角框，并且能夠在滾動到頂部或底部時自然地隱藏在圓角下方。
首先，我們來看一下原有的CSS樣式：
.model .box_m .box_m_b { width: 85%; height: 100%; border-radius: 10px; box-shadow: 1px 1px 10px 2px #b22222 inset; overflow: auto; display: flex; flex-direction: column; align-items: center; } <p>/<em> 滾動條樣式 </em>/ .model .box_m .box_m_b::-webkit-scrollbar { width: 6px; }</p><p>.model .box_m .box_m_b::-webkit-scrollbar-track { background: transparent; border-radius: 10px; }</p><p>.model .box_m .box_m_b::-webkit-scrollbar-thumb { background: rgba(178, 34, 34, 0.6); border-radius: 10px; }
可以看到，滾動條直接應用于.box_m_b元素上，但這會導致滾動條溢出圓角框。解決這個問題的策略是創建一個嵌套結構，將滾動條應用到內部元素上，同時讓外層容器負責處理圓角和溢出問題。
立即學習“前端免費學習筆記（深入）”；
下面是調整后的CSS樣式：
/<em> 外層容器設置圓角和陰影 </em>/ .model .box_m .box_m_b { width: 85%; height: 100%; border-radius: 10px; box-shadow: 1px 1px 10px 2px #b22222 inset; position: relative; overflow: hidden; /<em> 隱藏超出圓角的內容 </em>/ }</p><p>/<em> 內層可滾動容器 </em>/ .model .box_m .box_m_b .scrollable-content { width: 100%; height: 100%; overflow: auto; display: flex; flex-direction: column; align-items: center; padding-right: 6px; /<em> 為滾動條預留空間，防止內容偏移 </em>/ box-sizing: content-box; /<em> 確保padding不影響寬度計算 </em>/ }</p><p>/<em> 為內層容器設置滾動條樣式 </em>/ .model .box_m .box_m_b .scrollable-content::-webkit-scrollbar { width: 6px; }</p><p>.model .box_m .box_m_b .scrollable-content::-webkit-scrollbar-track { background: transparent; border-radius: 10px; }</p><p>.model .box_m .box_m_b .scrollable-content::-webkit-scrollbar-thumb { background: rgba(178, 34, 34, 0.6); border-radius: 10px; }
相應的html結構如下：
<div class="model"> <div class="box_m"> <div class="box_m_b"> <div class="scrollable-content"> <!-- 內容 --> </div> </div> </div> </div>
在這個調整后的結構中，.box_m_b作為外層容器，負責設置圓角和隱藏溢出的內容；而.scrollable-content作為內層容器，專門用于處理滾動條的樣式。這樣，滾動條就可以自然地隱藏在圓角下方，解決了溢出問題。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
