网站推广.NET

网站推广.NET

html 如何加滚动条

来源:互联网

在HTML中,可以通过CSS来添加滚动条,以下是一个简单的示例:

1、创建一个HTML文件,例如index.html,并添加以下内容:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF8">    <meta name="viewport" content="width=devicewidth, initialscale=1.0">    <title>带滚动条的页面</title>    <style>        /* 在这里添加CSS样式 */    </style></head><body>    <p class="scrollable">        <!在这里添加需要滚动的内容 >    </p></body></html>

2、接下来,在<style>标签内添加CSS样式,为.scrollable类添加overflowy: scroll;属性,以启用垂直滚动条,可以设置滚动条的宽度和颜色。

.scrollable {    height: 300px; /* 设置容器的高度 */    overflowy: scroll; /* 启用垂直滚动条 */    border: 1px solid #ccc; /* 设置边框 */}::webkitscrollbar {    width: 10px; /* 设置滚动条宽度 */}::webkitscrollbartrack {    backgroundcolor: #f1f1f1; /* 设置滚动条轨道背景颜色 */}::webkitscrollbarthumb {    backgroundcolor: #888; /* 设置滚动条滑块背景颜色 */}::webkitscrollbarthumb:hover {    backgroundcolor: #555; /* 设置滚动条滑块鼠标悬停时的背景颜色 */}

3、将需要滚动的内容添加到.scrollable类的<p>标签内。

<p class="scrollable">    <table>        <tr>            <th>标题1</th>            <th>标题2</th>            <th>标题3</th>        </tr>        <!在这里添加表格行和单元格 >    </table></p>

现在,当页面内容超过容器高度时,将显示垂直滚动条。

html滚动条样式