JavaScript 可滚动的 Div

Anika Tabassum Era 2023年1月30日 2022年5月26日
  1. 在 JavaScript 中使用 overflow 属性滚动 div 元素
  2. 在 JavaScript 中使用 overflowXoverflowY 属性来滚动 div 元素
JavaScript 可滚动的 Div

在 JavaScript 中,我们可以操纵某些使界面更好的事件。通常一些 CSS 属性的性能可以通过 JavaScript 实现来解释。

就像 CSS 中的 overflow-x 可以在 JavaScript 中完成与 overflowX 相同的任务。

我们的任务是使 div 元素可滚动。我们不会关注内容的 offsetHeight/Width 或基本高度宽度;相反,我们将设置一个具有静态大小的 div。

但内容可以是可变长度的。我们将看到两个示例,它们将涵盖 overflowoverflowX 和 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>

输出:

使用 overflow 属性滚动 div 元素

在 JavaScript 中使用 overflowXoverflowY 属性来滚动 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>

输出:

使用 overflowX 和 overflowY 属性来滚动一个 div 元素

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相关文章 - JavaScript Scroll