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