有时，我们想为HTML元素添加一个垂直或水平的容器。
这篇文章解释了如何添加水平和垂直滚动条的方法。它还包括改变滚动条颜色的CSS样式。
你可以使用CSS为HTML主体、表格、DIV和任何有效的HTML元素添加一个滚动条。
假设你有一个HTML div元素，你声明它的宽度是300px，高度是200px。
你添加的内容超过了给定的高度和宽度。那么它就会溢出并在网页上显示默认的滚动条（水平和垂直）。
让我们来看看一个div的例子
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.container{
width:150px;
height:200px;
border:1px red solid;
}
</style>
</head>
<body>
<body>
<div class= "container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Mattis enim ut tellus elementum sagittis. Amet risus nullam eget felis eget. A lacus vestibulum sed arcu non odio euismod lacinia at. Ultrices gravida dictum fusce ut placerat orci nulla. Lectus magna fringilla urna porttitor rhoncus. Nulla facilisi morbi tempus iaculis urna. Facilisis gravida neque convallis a cras semper auctor neque. Urna id volutpat lacus laoreet non curabitur gravida arcu ac. Eleifend donec pretium vulputate sapien nec sagittis. Nisl nisi scelerisque eu ultrices vitae auctor. Odio morbi quis commodo odio aenean sed adipiscing diam. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi. Vestibulum sed arcu non odio euismod lacinia at quis risus. Vitae et leo duis ut diam quam nulla.
Adipiscing bibendum est ultricies integer quis auctor. Viverra maecenas accumsan lacus vel facilisis volutpat. Dolor sed viverra ipsum nunc aliquet. Commodo quis imperdiet massa tincidunt nunc pulvinar. Diam quam nulla porttitor massa id neque aliquam vestibulum morbi. Nisi est sit amet facilisis magna etiam tempor. Facilisis sed odio morbi quis commodo odio. Pulvinar neque laoreet suspendisse interdum consectetur libero. Dolor magna eget est lorem.
Non tellus orci ac auctor augue mauris augue. Laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean. Vel quam elementum pulvinar etiam. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Dolor morbi non arcu risus quis varius quam. Phasellus faucibus scelerisque eleifend donec pretium. Arcu ac tortor dignissim convallis aenean et. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Eget aliquet nibh praesent tristique magna. In fermentum posuere urna nec tincidunt praesent. Porttitor massa id neque aliquam vestibulum morbi blandit. Eu ultrices vitae auctor eu augue ut lectus.
Vulputate enim nulla aliquet porttitor. Urna nunc id cursus metus. Suspendisse potenti nullam ac tortor vitae purus. Eget mi proin sed libero. Ut lectus arcu bibendum at varius vel pharetra vel. Nulla facilisi etiam dignissim diam quis. Et malesuada fames ac turpis egestas maecenas pharetra. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Risus viverra adipiscing at in tellus integer feugiat scelerisque varius. Cras adipiscing enim eu turpis egestas.
Consectetur adipiscing elit duis tristique sollicitudin nibh sit. Sit amet facilisis magna etiam tempor orci eu lobortis. A cras semper auctor neque. Augue ut lectus arcu bibendum at varius. Risus viverra adipiscing at in tellus integer feugiat scelerisque. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Massa tempor nec feugiat nisl pretium fusce id. Ac tincidunt vitae semper quis lectus. Feugiat in fermentum posuere urna.</p>
</div>
</body>
</html>
输出在浏览器中显示为和显示在给定的div宽度和高度之外的内容。
为了避免这种情况，我们可以使用overflow-x为水平滚动条，overflow-y为垂直滚动条添加一个滚动条。
overflow-x 和 ，包含以下值。overflow-y
visible：默认，如果发生溢出，显示给定分辨率以外的内容 invisible：只显示占据给定分辨率的内容是可见的，外面的内容是不可见的。 scroll：添加滚动条，内容被包裹在给定分辨率的滚动条内 auto：根据内容包裹的大小自动添加滚动条。 initial：初始值即可见 继承。考虑来自父级HTML元素的溢出值
水平滚动条示例。
overflow-x: scroll 做一个水平滚动条，用 ，将内容包起来。white-space nowrap
.container{
width:150px;
height:200px;
border:1px red solid;
white-space: nowrap;
overflow-x: scroll;
}
垂直滚动条的例子，overflow-y: scroll ，做一个垂直滚动条，用滚动条包裹内容。
添加以下的css样式
.container{
width:150px;
height:200px;
border:1px red solid;
overflow-y: scroll;
}
这样就可以输出下面的水平和垂直滚动条
该滚动条有一些WebKit样式，用于应用颜色和其他样式。
- webkit-scrollbar
- webkit-scrollbar-track
- webkit-scrollbar-thumb
这里是一个sass代码
.container {
width:150px;
height:200px;
overflow:scroll;
overflow-x:hidden;
overflow-y:auto;
&::-webkit-scrollbar{
width:10px;
}
& {
scrollbar-width:thin;
scrollbar-color: blue red;
}
&::-webkit-scrollbar-track{
background:blue;
border-radius:0 0 4px 0;
}
&::-webkit-scrollbar-thumb{
background:red;
border-radius:4px;
}
}
这里是css代码
.container {
width: 150px;
height: 200px;
overflow: scroll;
overflow-x: hidden;
overflow-y: auto;
}
.container::-webkit-scrollbar {
width: 10px;
}
.container {
scrollbar-width: thin;
scrollbar-color: blue red;
}
.container::-webkit-scrollbar-track {
background: blue;
border-radius: 0 0 4px 0;
}
.container::-webkit-scrollbar-thumb {
background: red;
border-radius: 4px;
}
而html则是
<div class= "container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Mattis enim ut tellus elementum sagittis. Amet risus nullam eget felis eget. A lacus vestibulum sed arcu non odio euismod lacinia at.
Adipiscing bibendum est ultricies integer quis auctor. Viverra maecenas accumsan lacus vel facilisis volutpat. Dolor sed viverra ipsum nunc aliquet. Commodo quis imperdiet massa tincidunt nunc pulvinar.
</p>
</div>
将滚动条渲染成带有CSS颜色样式的div
