JavaScript 可滾動的 Div
Anika Tabassum Era
2024年2月15日
在 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>
輸出：
