使用 CSS 使 div 水平滾動(dòng)
在 CSS 中，我們可以通過(guò)設(shè)置適當(dāng)?shù)摹皁ver-flow”屬性值來(lái)使 div 水平滾動(dòng)。
首先，讓我們了解為什么我們需要使 div 水平滾動(dòng)。例如，父div元素的寬度為500px，或者屏幕尺寸為500px?，F(xiàn)在，div 元素的內(nèi)容是 1500px。因此，如果我們不讓父 div 水平滾動(dòng)，就會(huì)破壞應(yīng)用程序的 UI。因此，我們可以使其可滾動(dòng)，用戶可以滾動(dòng)查看不可見(jiàn)的內(nèi)容。
語(yǔ)法
用戶可以按照以下語(yǔ)法使 div 水平滾動(dòng)。
.scroll {
width:<Width_of_div_element>;
overflow: scroll;
}
在上面的語(yǔ)法中，我們使用了“width”和“overflow”屬性來(lái)使 div 水平滾動(dòng)。如果我們不指定元素的寬度，“overflow”屬性不會(huì)受到影響。
示例 1
在下面的示例中，我們創(chuàng)建了 HTML div 并添加了一些文本內(nèi)容。在 CSS 中，我們?yōu)?div 元素指定了“500px”固定寬度。此外，我們還設(shè)置了“scroll”作為溢出屬性的值。
在輸出中，用戶可以觀察到，當(dāng)文本寬度大于類(lèi)名為“scroll”的 div 的寬度時(shí)，div 元素中出現(xiàn)水平滾動(dòng)條。
<html>
<head>
<style>
.scroll {
margin: 5px;
padding: 5px;
border: 2px solid blue;
width: 500px;
overflow: scroll;
white-space: nowrap;
height: 50px;
}
</style>
</head>
<body>
<h3>Using the <i> overflow-x: scroll </i> to make a div horizontally scrollable using CSS</h3>
<div class = "scroll">
The United States of America (USA) has the largest GDP in the world. In 2020, the nominal GDP of the United
States was $21.43 trillion. China is the second-largest economy in the world, with a nominal GDP of $14.34
trillion in 2020. Other countries with large GDPs include Japan, Germany, and the United Kingdom.
</div>
</body>
</html>
示例 2
在下面的示例中，我們使用了“overflow: auto”CSS 屬性來(lái)使 div 水平滾動(dòng)。此外，我們還為 div 元素指定了固定寬度。 ‘a(chǎn)uto’和‘scroll’值之間的主要區(qū)別是，當(dāng)我們使用‘scroll’時(shí)，div始終保持可滾動(dòng)，而當(dāng)我們使用‘a(chǎn)uto’時(shí)，div元素在發(fā)生溢出時(shí)變得可滾動(dòng)。
<html>
<head>
<style>
.scroll {
border: 2px solid green;
width: 500px;
overflow: auto;
white-space: nowrap;
height: 50;
}
</style>
</head>
<body>
<h3>Using the <i> overflow: auto </i> to make a div horizontally scrollable using CSS</h3>
<div class = "scroll">
This is a sample text to put in the HTML div element. You can scroll this div horizontally.
</div>
</body>
</html>
示例 3
在下面的示例中，我們使用了“overflow-x: auto”CSS 屬性來(lái)使 div 水平滾動(dòng)。我們已在父 div 內(nèi)添加了單個(gè)子 div。
在輸出中，用戶可以觀察到，由于我們使用了“auto”值，最初外部 div 是不可滾動(dòng)的。當(dāng)我們點(diǎn)擊“添加 div”按鈕時(shí)，它會(huì)使用 JavaScript 將子 div 添加到父 div，并且當(dāng)您添加 5 到 7 個(gè)子 div 時(shí)，它會(huì)自動(dòng)變得可滾動(dòng)。
<html>
<head>
<style>
.scroll { border: 2px solid green; width: 500px; overflow-x: auto; white-space: nowrap; display: flex; flex-direction: row; }
.inner { max-width: 250px; height: 100px; background-color: red; border: 2px dotted blue; margin: 3px; }
</style>
</head>
<body>
<h3>Using the <i> overflow-x: auto </i> to make a div horizontally scrollable using CSS</h3>
<div class = "scroll">
<div class = "inner">
Inner Div
</div>
</div>
<button onclick = "addDiv()"> Add div </button>
</body>
<script>
function addDiv() {
// add the div element to the scroll div
let scroll = document.querySelector('.scroll');
let new_div = document.createElement('div');
new_div.classList.add('inner');
new_div.innerHTML = 'Inner Div';
scroll.appendChild(new_div);
}
</script>
</html>
示例 4
在下面的示例中，我們使用 CSS 設(shè)計(jì)了滾動(dòng)條。首先，我們使 div 可以水平滾動(dòng)以顯示滾動(dòng)條。之后，我們?cè)O(shè)置滾動(dòng)條的背景顏色。此外，我們還設(shè)計(jì)了滾動(dòng)條軌道和滑塊。
在輸出中，用戶可以觀察到好看的滾動(dòng)條，并根據(jù)需求進(jìn)行設(shè)計(jì)。
<html>
<head>
<style>
.scroll {
width: 500px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
border: 1px solid red;
scrollbar-width: thin;
scrollbar-color: grey;
}
/* styling the scroll bar */
.scroll::-webkit-scrollbar { width: 10px; height: 10px }
.scroll::-webkit-scrollbar-track { background: darkgray;}
.scroll::-webkit-scrollbar-thumb { background: grey; border-radius: 10px; }
</style>
</head>
<body>
<h3>Using the <i> overflow-x: auto </i> to make a div horizontally scrollable using CSS</h3>
<div class = "scroll">
This div is horizontally scrollable. How are you? Do you like CSS? Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.
</div>
</body>
</html>
用戶學(xué)會(huì)了使用 CSS 的“overflow”屬性使 div 水平滾動(dòng)。在第一個(gè)示例中，我們使用了“overflow:scroll”CSS 屬性。在第二個(gè)示例中，我們使用了“overflow: auto”CSS 屬性。在第三個(gè)示例中，我們使用了“overflow-x: auto”CSS 屬性；在最后一個(gè)示例中，我們使用 CSS 設(shè)計(jì)了滾動(dòng)條。
前端入門(mén)到VUE實(shí)戰(zhàn)筆記：立即學(xué)習(xí)
在學(xué)習(xí)筆記中，你將探索 前端 的入門(mén)與實(shí)戰(zhàn)技巧！
以上就是使用 CSS 使 div 水平滾動(dòng)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注有啊網(wǎng)站百科其它相關(guān)文章！
相關(guān)閱讀：
- 喜歡（11）
- 不喜歡（2）
火車(chē)太堵
電影獵手
555
豌豆
有啊京券網(wǎng)
有啊淘券網(wǎng)
極簡(jiǎn)插件
RedHelper
壹伴
百分投簡(jiǎn)歷
