div 顯示不完滾動是指當(dāng)一個(gè) div 元素內(nèi)容超出其容器的尺寸時(shí)，內(nèi)容無法完全展示出來，而出現(xiàn)滾動條以便用戶可以滾動查看內(nèi)容。本文將通過幾個(gè)代碼案例，詳細(xì)解釋說明 div 顯示不完滾動的原理和實(shí)現(xiàn)方法。
在 HTML 中，使用 CSS 的 overflow 屬性可以控制 div 元素的滾動行為。具體來說，當(dāng)設(shè)置 div 元素的 overflow 屬性為 auto、scroll 或 overlay 時(shí)，如果元素的內(nèi)容超出了容器的尺寸，就會生成一個(gè)滾動條。而當(dāng)設(shè)置為 hidden 或 visible 時(shí)，內(nèi)容超出容器的部分會被裁剪或者顯示出來。下面的代碼案例將演示這種滾動行為。
，我們需要創(chuàng)建一個(gè)具有固定尺寸的 div 容器，并在其中加入足夠多的文本內(nèi)容，以觸發(fā)滾動行為。代碼如下：

<style>
.container {
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
<br>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum urna eget facilisis pellentesque. Sed eleifend lacus ac vulputate vulputate. Curabitur ullamcorper elit ut ligula consectetur rutrum. In id ipsum turpis. Nam vitae sodales ex. Aliquam a accumsan elit. Aenean dictum, mauris ut ultrices congue, diam dui finibus magna, ac laoreet nisl est non lacus. Etiam malesuada metus vitae odio laoreet condimentum. Nullam efficitur mauris sit amet sem dapibus, at elementum tellus fermentum. Mauris malesuada ipsum sed fringilla consequat. Sed malesuada eget eros id gravida. Integer eu purus ac leo tempor viverra.</p>
</div>

運(yùn)行以上代碼，你將會看到一個(gè)具有 300px × 300px 尺寸的 div 容器，而文本內(nèi)容超出了容器的大小。然而，由于容器的 overflow 屬性默認(rèn)為 visible，所以內(nèi)容被裁剪，無法完全展示全部文本。
接下來，我們將 overflow 屬性設(shè)置為 auto，以啟用滾動條。代碼如下：

<style>
.container {
width: 300px;
height: 300px;
border: 1px solid black;
overflow: auto;
}
</style>
<br>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum urna eget facilisis pellentesque. Sed eleifend lacus ac vulputate vulputate. Curabitur ullamcorper elit ut ligula consectetur rutrum. In id ipsum turpis. Nam vitae sodales ex. Aliquam a accumsan elit. Aenean dictum, mauris ut ultrices congue, diam dui finibus magna, ac laoreet nisl est non lacus. Etiam malesuada metus vitae odio laoreet condimentum. Nullam efficitur mauris sit amet sem dapibus, at elementum tellus fermentum. Mauris malesuada ipsum sed fringilla consequat. Sed malesuada eget eros id gravida. Integer eu purus ac leo tempor viverra.</p>
</div>

運(yùn)行以上代碼，你將看到 div 容器內(nèi)部生成了一個(gè)垂直滾動條。通過拖動滾動條，你可以滾動查看內(nèi)容超出的部分。此時(shí)，div 容器可以顯示全部文本內(nèi)容，用戶可以手動滾動來查看。
掌握了滾動條的基本用法后，我們可以進(jìn)一步定制滾動條的樣式。下面的代碼案例將演示如何使用 CSS 的 ::-webkit-scrollbar 偽元素來改變滾動條的外觀。
，我們需要為容器設(shè)置 overflow 屬性為 auto，以啟動滾動條。接著，使用 CSS 中的 ::-webkit-scrollbar 偽元素來設(shè)置滾動條的樣式。代碼如下：

<style>
.container {
width: 300px;
height: 300px;
border: 1px solid black;
overflow: auto;
}
<br>
    .container::-webkit-scrollbar {
width: 8px;
}
<br>
    .container::-webkit-scrollbar-thumb {
background-color: #888;
}
<br>
    .container::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
</style>
<br>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum urna eget facilisis pellentesque. Sed eleifend lacus ac vulputate vulputate. Curabitur ullamcorper elit ut ligula consectetur rutrum. In id ipsum turpis. Nam vitae sodales ex. Aliquam a accumsan elit. Aenean dictum, mauris ut ultrices congue, diam dui finibus magna, ac laoreet nisl est non lacus. Etiam malesuada metus vitae odio laoreet condimentum. Nullam efficitur mauris sit amet sem dapibus, at elementum tellus fermentum. Mauris malesuada ipsum sed fringilla consequat. Sed malesuada eget eros id gravida. Integer eu purus ac leo tempor viverra.</p>
</div>

運(yùn)行以上代碼，你將看到滾動條的寬度被設(shè)置為 8px，滾動條拖動部分的背景色設(shè)置為 #888，同時(shí)滾動條的軌道背景色被設(shè)置為 #f1f1f1。這樣，你就可以根據(jù)項(xiàng)目的需求來定制滾動條的外觀，讓其與頁面風(fēng)格相匹配。
起來，div 顯示不完滾動是通過設(shè)置 overflow 屬性為 auto 或 scroll 來實(shí)現(xiàn)的，通過拖動滾動條來查看超出容器尺寸的內(nèi)容。以上代碼案例提供了一些基礎(chǔ)的滾動條定制方法，可以幫助你實(shí)現(xiàn)更好的用戶體驗(yàn)。在實(shí)際項(xiàng)目中，你可以根據(jù)需要靈活運(yùn)用這些方法，并結(jié)合其他 CSS 屬性和 JavaScript 功能來實(shí)現(xiàn)更復(fù)雜的滾動效果。