html 添加滚动条
要在 HTML 页面中添加滚动条，您需要使用 CSS 样式表。以下是一些示例代码，可以帮助您了解如何添加滚动条：
- 垂直滚动条
<!DOCTYPE html>
<html>
<head>
<title>Vertical Scrollbar Example</title>
<style>
/* 设置容器的高度和宽度 */
.container {
height: 200px;
width: 400px;
overflow-y: scroll; /* 显示垂直滚动条 */
}
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius, leo et molestie malesuada, tellus lorem auctor lorem, a aliquet orci orci vel ante. Nulla facilisi. Fusce rhoncus, quam at blandit bibendum, nunc lacus tincidunt orci, ac dignissim lectus libero sit amet ante. Donec euismod velit purus, vel lobortis nisl efficitur vel. Nam eget dolor nec erat vulputate bibendum. Sed in ipsum nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur et justo nunc. Nullam eget aliquet nibh. Sed malesuada, nisl vitae posuere pellentesque, ante elit malesuada metus, euismod ultrices enim mi vitae ante. Sed auctor, risus ac ultrices elementum, sapien augue hendrerit purus, vel imperdiet sapien odio id est. Sed sit amet dui non arcu tristique euismod. Nullam tincidunt velit vel odio iaculis, in egestas ligula egestas. </p>
</div>
</body>
</html>
- 水平滚动条
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Scrollbar Example</title>
<style>
/* 设置容器的高度和宽度 */
.container {
height: 100px;
width: 400px;
overflow-x: scroll; /* 显示水平滚动条 */
white-space: nowrap; /* 防止文本换行 */
}
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius, leo et molestie malesuada, tellus lorem auctor lorem, a aliquet orci orci vel ante. Nulla facilisi. Fusce rhoncus, quam at blandit bibendum, nunc lacus tincidunt orci, ac dignissim lectus libero sit amet ante. Donec euismod velit purus, vel lobortis nisl efficitur vel. Nam eget dolor nec erat vulputate bibendum. Sed in ipsum nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur et justo nunc. Nullam eget aliquet nibh. Sed malesuada, nisl vitae posuere pellentesque, ante elit malesuada metus, euismod ultrices enim mi vitae ante. Sed auctor, risus ac ultrices elementum, sapien augue hendrerit purus, vel imperdiet sapien odio id est. Sed sit amet dui non arcu tristique euismod. Nullam tincidunt velit vel odio iaculis, in egestas ligula egestas. </p>
</div>
</body>
</html>
- 垂直和水平滚动条
<!DOCTYPE html>
<html>
<head>
<title>Vertical and Horizontal Scrollbar Example</title>
<style>
/* 设置容器的高度和宽度 */
.container {
height: 200px;
width: 400px;
overflow: scroll; /* 显示垂直和水平滚动条 */
}
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius, leo et molestie malesuada, tellus lorem auctor lorem, a aliquet orci orci vel ante. Nulla facilisi. Fusce rhoncus, quam at blandit bibendum, nunc lacus tincidunt orci, ac dignissim lectus libero sit amet ante. Donec euismod velit purus, vel lobortis nisl efficitur vel. Nam eget dolor nec erat vulputate bibendum. Sed in ipsum nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur et justo nunc. Nullam eget aliquet nibh. Sed malesuada, nisl vitae posuere pellentesque, ante elit malesuada metus, euismod ultrices enim mi vitae ante. Sed auctor, risus ac ultrices elementum, sapien augue hendrerit purus, vel imperdiet sapien odio id est. Sed sit amet dui non arcu tristique euismod. Nullam tincidunt velit vel odio iaculis, in egestas ligula egestas. </p>
</div>
</body>
</html>
``
原文地址: http://www.cveoy.top/t/topic/egnb 著作权归作者所有。请勿转载和采集!