极客笔记CSS 使一个div在水平方向滚动
在CSS中，我们可以通过设置’over-flow’属性的适当值来使一个div在水平方向上滚动。
首先，让我们理解为什么需要使一个div在水平方向上滚动。例如，父div元素的宽度为500px，或者屏幕尺寸为500px。现在，div元素的内容为1500px。所以，如果我们不将父div在水平方向上滚动，它会破坏应用程序的UI。因此，我们可以使其可滚动，用户可以滚动以查看不可见的内容。
语法
用户可以按照以下语法使一个div在水平方向上滚动。
.scroll {
width:<Width_of_div_element>;
overflow: scroll;
}
在上面的语法中，我们使用了 ‘width’ 和 ‘overflow’ 属性使 div 水平滚动。如果我们不指定元素的宽度，’overflow’ 属性不会受到影响。
示例1
在下面的示例中，我们创建了HTML div并添加了一些文本内容。在 CSS 中，我们为 div 元素设置了 ‘500px’ 的固定宽度。此外，我们将 ‘scroll’ 设置为 overflow 属性的值。
在输出中，用户可以观察到由于文本宽度超过具有类名 ‘scroll’ 的 div 的宽度，div 元素中会出现水平滚动条。
<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 of14.34
trillion in 2020. Other countries with large GDPs include Japan, Germany, and the United Kingdom.
</div>
</body>
</html>
示例2
在下面的示例中，我们使用了“overflow: auto” CSS属性使div元素在水平方向上可以滚动。此外，我们还给div元素设置了固定宽度。‘auto’和‘scroll’值之间的主要区别是当我们使用‘scroll’时，div始终可滚动，而当我们使用‘auto’时，当溢出发生时div元素才变得可滚动。
<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属性使一个div水平滚动。我们在父div里面添加了一个单个子div。
在输出中，用户可以观察到，我们使用了’auto’的值，初始外部div是不可滚动的。当我们单击’添加div’按钮时，使用JavaScript向父div中添加子div，当添加5至7个子div时，它会自动变为可滚动。
<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设计了滚动条。首先，我们使div水平滚动以显示滚动条。之后，我们设置了滚动条的背景颜色。此外，我们还设计了滚动条的轨道和拇指。
在输出中，用户可以根据要求观察到漂亮的滚动条和设计。
<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>
用户学会了使用CSS的‘overflow’属性使一个div水平滚动。在第一个示例中，我们使用了’overflow:scroll’的CSS属性。在第二个示例中，我们使用了’overflow:auto’的CSS属性。在第三个示例中，我们使用了’overflow-x:auto’的CSS属性；在最后一个示例中，我们使用CSS设计了滚动条。