我们要在网站中使用的内容可能会很大并且可能会占用大量空间，这意味着网站的其他元素可能会被取代，从而影响网站的响应能力。为了避免这种情况的发生，需要为用户提供可滚动的内容，以便如果用户感兴趣，他或她可以向下滚动以阅读整个内容。
在本文中，我们将了解如何使 div 垂直滚动以及我们将使用什么属性来实现此目的。
如何让div垂直滚动？
overflow属性可以用于使DIV垂直滚动，因为可以在overflow属性中输入多个值。有一些值，例如hidden和auto。我们可以根据所使用的值创建水平和垂直滚动条。如果使用auto值，我们可以获得垂直滚动条。让我们来看一下overflow属性的语法：
语法
overflow:hidden/visible/clip/scroll/auto/inherit;
我们将使用x轴和y轴，并将x轴的属性设置为隐藏，y轴的属性设置为自动，这将隐藏水平滚动条，只显示垂直滚动条，我们将自动获得所需的div。
示例
在此示例中，我们将声明一个 div，然后编写一个段落，我们将在其中添加溢出属性以使 div 垂直滚动。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of vertically scrollable div</title>
<style>
h2 {
color: Green;
}
.scrl {
padding: 3px;
color: white;
margin: 2px, 2px;
background-color: black;
height: 118px;
overflow-x: hidden;
color: white;
overflow-y: auto;
text-align: justify;
width: 489px;
}
</style>
</head>
<body>
<center>
<h2>Hi! This an example of the vertically scrollable div</h2>
<div class="scrl">This is an example of the vertically scrollable
div many beginner coders need the help of some articles or some sort of tutorials
to write there code. There are many instances in which the coder might need help
or can be stuck on a particular question. The community of coders is very huge
and is ready to help everyone at anywhere and at whatever time. The coding community
will help the coder to enhance his skills and his fluency in code. The coder can
choose a language to write his or her code depending on his interest as every
language has its own expertise and functions.
</div>
</center>
</body>
</html>
在上面的代码中，我们使用了溢出属性，并将其 x 轴更改为隐藏，将 y 轴更改为可见，这为我们在此处编写的段落中提供了一个垂直可滚动条。让我们看看执行代码所得到的输出。
您可以查看上面的输出，可以看到我们有一个可垂直滚动的栏，可用于向下滚动。
注意 – 当我们使用overflow属性时，需要指定“块元素”的元素，否则可能无法工作。由于该属性主要用于剪辑内容或添加可滚动条（无论是垂直还是水平），因为正在使用的内容太大而无法容纳指定区域。
让我们看另一个例子来更好地理解这个属性。
示例
在这个例子中，我们将把属性的值设置为auto，而不是改变属性的x轴和y轴，以使div垂直滚动。以下是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title> Another Example of vertically scrollable div</title>
<style>
.scrlr {
margin: 4px;
padding: 4px;
color: white;
background-color: black;
width: 488px;
height: 118px;
margin: 4px;
text-align: justify;
overflow: auto;
width: 488px;
text-align: justify;
}
h2 {
color: Red;
}
</style>
</head>
<body>
<center>
<h2>Hi! This another example of the verticallly scrollable div</h2>
<div class="scrlr">This is an example of the vertically scrollable div
many beginner coders need the help of some articles or some sort of tutorials to
write there code. There are many instances in which the coder might need help or
can be stuck on a particular question. The community of coders is very huge and
is ready to help everyone at anywhere and at whatever time. The coding community
will help the coder to enhance his skills and his fluency in code. The coder can
choose a language to write his or her code depending on his interest as every
language has its own expertise and functions.
</div>
</center>
</body>
</html>
在上面的代码中，我们将overflow属性的值从隐藏的x轴和自动的y轴改为了auto，并使用相同的示例来查看我们的输出结果。让我们来看一下这段代码将生成的输出。
您可以查看上述输出，可以看到即使在overflow属性上使用了auto值，我们仍然有滚动条。
结论
overflow 属性被广泛使用，以便在内容占用大量空间时剪辑内容。或者，如果我们想添加一个滚动条供用户向下滚动，从而减少其在网页上占用的整体空间。
在本文中，我们了解了如何使用溢出属性以及如何在 div 上添加垂直滚动条，以及有关溢出属性中使用的值的更多信息。
以上就是使用 CSS 使 Div 可垂直滚动的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 使用 CSS 使 Div 可垂直滚动
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
