JavaScript 可滚动的 Div
Anika Tabassum Era
2023年1月30日
2022年5月26日
在 JavaScript 中,我们可以操纵某些使界面更好的事件。通常一些 CSS 属性的性能可以通过 JavaScript 实现来解释。
就像 CSS 中的 overflow-x
可以在 JavaScript 中完成与 overflowX
相同的任务。
我们的任务是使 div
元素可滚动。我们不会关注内容的 offsetHeight/Width
或基本高度宽度;相反,我们将设置一个具有静态大小的 div。
但内容可以是可变长度的。我们将看到两个示例,它们将涵盖 overflow
和 overflowX 和 overflowY
的用法。
让我们来看看这些代码。
在 JavaScript 中使用 overflow
属性滚动 div
元素
如果内容大于 div
大小,auto
值的 overflow
属性将自动创建一个垂直滚动条。这个属性将解决制作可滚动的 div
元素的情况。
在以下代码行中,提供了一个演示。
代码片段:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
<style>
div{
background: powderblue;
}
#scroll{
height:100px;
width: 200px;
}
</style>
</head>
<body>
<div id="scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis reprehenderit earum, rem tenetur quaerat, ab, nostrum ducimus totam quis natus placeat eos vitae? Sint eos, ab eum repellendus ex praesentium.</p>
</div>
<script>
document.getElementById('scroll').style.overflow = 'auto';
</script>
</body>
</html>
输出:
在 JavaScript 中使用 overflowX
和 overflowY
属性来滚动 div
元素
我们根据这些属性集将 x-axis
滚动条设置为 none
。因此,垂直滚动条的值 overflowY
设置为 auto
。
因此,当内容的大小大于 div
时,滚动条就会出现并起作用。代码提供了更好的预览。
代码片段:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div{
background: lavender;
}
#scroll{
height:100px;
width: 200px;
}
</style>
</head>
<body>
<div id="scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis reprehenderit earum, rem tenetur quaerat, ab, nostrum ducimus totam quis natus placeat eos vitae? Sint eos, ab eum repellendus ex praesentium.</p>
</div>
<script>
document.getElementById('scroll').style.overflowX='none';
document.getElementById('scroll').style.overflowY='auto';
</script>
</body>
</html>
输出:
Author: Anika Tabassum Era