JavaScript 可滚动的 Div

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 可滚动的 Div

作者：迹忆客最近更新：2024/03/18 浏览次数：

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