JavaScript 可滚动的 Div
Anika Tabassum Era
2024年2月15日
JavaScript
JavaScript Scroll
在 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>
输出：
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
