JavaScript でスクロール可能な div
Anika Tabassum Era
2023年1月30日
JavaScript
JavaScript Scroll
-
JavaScript で
overflowプロパティを使用してdiv要素をスクロールする -
JavaScript で
overflowXとoverflowYプロパティを使用してdiv要素をスクロールさせる
JavaScript では、インターフェースを改善する特定のイベントを操作できます。多くの場合、一部の CSS プロパティのパフォーマンスは、JavaScript の実装によって説明できます。
CSS の overflow-x が JavaScript で overflowX と同じタスクを実行できるのと同じように。
私たちの仕事は、div 要素をスクロール可能にすることです。offsetHeight/Width やコンテンツの基本的な高さの幅には焦点を当てません。むしろ、静的サイズで div を設定します。
ただし、コンテンツは可変長にすることができます。overflow と overflowX と overflowY の使用法をカバーする 2つの例を見ていきます。
コードを確認しましょう。
JavaScript で overflow プロパティを使用して div 要素をスクロールする
値 auto の overflow プロパティは、コンテンツが div サイズよりも大きい場合、垂直スクロールバーを自動的に作成します。この 1つのプロパティは、スクロール可能な 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 軸スクロールバーをなしに設定します。したがって、垂直スクロールバーは 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>
出力：
チュートリアルを楽しんでいますか？ <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe
