HTML Table 中的滚动条是水平和垂直格式滚动数据的功能之一。默认情况下，输入数据数后会启用垂直滚动条，以在垂直模式下最大化尺寸。但在水平模式下，以段落格式输入数据且未换行后，页面包含右箭头作为启用水平滚动条中数据的选项。我们借助鼠标指针自定义了滚动选项。我们还可以分配滚动表的边框、高度和宽度。
当文本框的内容太大而无法容纳时，HTML 滚动框将确保文本框增长滚动条。一些应用程序，例如移动应用程序，使用滚动框，这将显示其功能，但大的移动屏幕会显示它良好的一些小移动屏幕兼容性，它不会显示在屏幕上，即）应用程序功能，这是要使用的滚动框。需要一些插件来显示要在浏览器屏幕中使用的 Web 应用程序中的某些功能。假设我们要在 HTML 中添加滚动条选项，使用“溢出”选项，并将其设置为自动启用以添加水平和垂直滚动条。如果我们想在 Html 中添加竖线选项，请在文件中添加“overflow-y”行。
溢出：滚动：
{
Overflow-x:scroll;//add horizontal bar option in html
Overflow-y:scroll; //add vertical bar option in html
}使用标签，我们将向 HTML 页面添加滚动选项。
<style>
div.scroll
{
Width-5px;
Height-10 px;
Overflow-x:scroll;
}
</style>给出了 HTML 表格的示例：
代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.divScroll {
overflow:scroll;
height:100px;
width:200px;
}
</style>
</head>
<body>
<div class="divScroll">
SivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaraman
</div>
</body>
</html>输出：
在上面的例子中，我们启用了水平和垂直条的滚动；如果文本超出文本框限制，滚动将自动启用。
代码：
<html>
<style>
.divScroll {
overflow:scroll;
height:25px;
width:200px;
}
</style>
<body>
<center>
<marquee class="divScroll" color:"white">Welcome to my domain</marquee>
</center>
</body>
</html>输出：
在上面的例子中，我们使用了
在下面的示例中，我们将使用警报功能，以像素格式在网页上显示多少数据。
代码：
<html> <body> <center> <div id="example" class="overflow-y:scroll;width:100px;height:200px;border:1px solid black" color:"white"> <marquee>Welcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domain </marquee> </div> <button onclick="alert( getComputedStyle(example).width )">alert( getComputedStyle(example).width )</button> </center> </body> </html>
输出：
我们可以使用表格行
代码：
<html> <body> <center> <div style="overflow-x:auto;"> <table> <tr> <th>Welcome to my domain</th> <th>Name</th> <th>Email</th> </tr> <tr> <td>Sivaraman</td> <td>Sivaraman</td> <td>[email protected]</td> </div> </center> </body> </html>
输出：
这里我们将看到 HTML 中各种类型的滚动框
在滚动框选项中，我们在文本框空间区域添加了不同类型的颜色，如下例所示：
代码：
<html> <body> <div style="height:125px;width:100px;overflow:auto;background-color:yellowgreen;color:white;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;">Welcome to my domain.Welcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domain</div> </body> </html>
输出：
在上面的例子中，我们在文本中指定了颜色，在滚动面板中也是如此。
我们使用Webkit扩展自定义了滚动条；它将在浏览器中运行。
代码：
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin-bottom: 200%;
}
.scroll {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 200px;
height: 200px;
overflow: scroll;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
border: 1px solid yellowgreen;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: yellowgreen;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #88ba1c;
}
</style>
</head>
<body>
<div class="scroll">
Welcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domain
</div>
</body>
</html>输出：
在上面的代码中，我们在整个页面上看到滚动选项。这是我们的定制选项；我们已经在整个背景屏幕中启用了滚动选项。有一次，我们还检查了浏览器兼容性，因为有时CSS样式的工具-Webkit不接受某些浏览器。例如，Microsoft 有 –ms- 扩展和其他浏览器供应商，如 –Webkit- 扩展。
我们还在背景图像或前景图像中使用了滚动框。让我们看一下此功能的一些基本示例。
代码：
<html> <div style="height:180px;width:180px;overflow:auto;"> <img src="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg" alt="Sample picture for scroll box"> </div> </html>
输出：
We have also added the borders in the scroll panel areas. It will appear like highlighted portion Example below:
Code:
<div style="height:100px;width:140px;overflow:auto;border:8px solid yellow;padding:3%">Welcome to My DomainWelcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.</div>
Output:
The above picture highlights the scroll area. Similarly, we can also add different borders like dotted, dashed, double borders, etc.
When we use the Scroll box, it may have some features like.,
In General, We have used many features in the HTML language, but the Scroll bar is one of the best features for crisping the data on the web page for displaying the contents. The above examples and points are in basics; meanwhile, we will have many advanced concepts and features in the HTML and CSS with Scroll bar options. The Latest Versions, HTML 5, and CSS 3, may add some options in the text scroll areas.
以上是HTML 表格中的滚动条的详细内容。更多信息请关注PHP中文网其他相关文章！
