私<div>
は非常に長い高さ (2000px、多かれ少なかれ) を作成し、その一部 (400px-500px) のみを表示し、スクロールバーを使用して閲覧したいと考えています。
どこから始めればよいかわかりません。記事やハウツーを持っている人、またはこれを行う方法についての指示を教えてくれる人はいますか? ありがとう。
これを試してみてください。HTMLが動作します
<div id="main_div">
// Your contents
</div>
CSS
<style type="text/css">
#main_div {
width:200px;
height:400px;
overflow:scroll;
}
// stylish scroll bar
#main_div{
overflow: scroll;
}
#main_div::-webkit-scrollbar {
background: transparent;
height: 4px;
overflow: visible;
width: 4px;
}
#main_div::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.9);
-webkit-border-radius:5px;
}
#main_div::-webkit-scrollbar-thumb:hover{
background-color: rgba(0, 0, 0, 0.6);
}
#main_div::-webkit-scrollbar-corner {
background: transparent;
}
</style>
必要なのheight
は、コンテナとoverflow
メソッドの を指定することだけです:
HTML
<div class="container">
<!-- content here -->
</div>
CSS
.container {
height: 400px;
overflow-y: scroll;
}
CSS の「オーバーフロー」プロパティを見てください: https://developer.mozilla.org/en-US/docs/CSS/overflow
これにより、外側のコンテナがコンテンツのサイズを処理する方法を指定できます。