HTML滚动条的创建及示例

2021-08-26 12:27:07
623次极悦

在 HTML 表格中创建滚动条

当文本框的内容太大意味着无法容纳时，HTML滚动框将确保该框增长滚动条。一些应用程序如移动应用程序使用滚动框，它会显示它们的功能，但在大移动屏幕上会显示它一些小移动屏幕兼容性它不会显示在屏幕中，即)将在滚动框中使用的应用程序功能. 在浏览器屏幕中使用的Web应用程序中，需要一些插件来显示某些功能。假设我们想在 HTML中添加一个滚动条选项，使用“溢出”选项并将其设置为自动启用以添加水平和垂直滚动条。如果我们想在 Html中添加竖线选项，请在文件中添加“overflow-y”行。

滚动条的CSS文件语法

溢出：滚动：

{
Overflow-x:scroll;//add horizontal bar option in html
Overflow-y:scroll; //add vertical bar option in html
}

滚动条的HTML文件语法

通过使用<Style>标签，我们将在HTML页面本身中添加滚动选项。

<style>
div.scroll
{
Width-5px;
Height-10 px;
Overflow-x:scroll;
}
</style>

HTML表格中滚动条的示例

给出了HTML表的示例：

示例#1

代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.divScroll {
overflow:scroll;
height:100px;
width:200px;
}
</style>
</head>
<body>
<div class="divScroll">
SivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaraman
</div>
</body>
</html>

输出：

上面的例子显示我们启用了水平和垂直条的滚动;如果文本超出文本框限制，滚动将自动启用。

示例#2

代码：

<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>

输出：

在上面的例子中，我们使用了<marquee>; 我们将使用滚动选项显示选取框内的文本。我们可以使用动画滚动条中的文本。我们还使用了不同的<marquee>集，例如更快的滚动、更快的反弹、文本向下滚动、文本向上滚动、文本跳转、正常速度等。

示例 #3

在下面的示例中，我们将使用以像素格式在网页上显示多少数据的警报功能。

代码：

<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>

输出：