當(dāng)div內(nèi)容溢出容器定義的高度時(shí),滾動(dòng)條顯示,并美化默認(rèn)的滾動(dòng)條樣式

div 容器

 <divclass="content">內(nèi)容
</div>

css 樣式

/* 問話區(qū)域 滾動(dòng)條 */
.content {overflow: auto;height: 662px;padding: 25px;scrollbar-width: thin; /* 設(shè)置滾動(dòng)條寬度 */border-radius: 10px; /* 設(shè)置滾動(dòng)條圓角 */
}
/* 滾動(dòng)條美化 */
.content::-webkit-scrollbar {width: 7px; /* 設(shè)置滾動(dòng)條的寬度 */
}.content::-webkit-scrollbar-track {/* background: #; 設(shè)置滾動(dòng)條軌道的背景色 */opacity: 0.5
}.content::-webkit-scrollbar-thumb {background: rgb(164, 168, 167); /* 設(shè)置滾動(dòng)條滑塊的背景色 */
}

效果