CSS - แถบเลื่อน
อาจมีบางกรณีที่เนื้อหาขององค์ประกอบอาจมีขนาดใหญ่กว่าจำนวนพื้นที่ที่จัดสรรให้ ตัวอย่างเช่นคุณสมบัติความกว้างและความสูงที่กำหนดไม่อนุญาตให้มีพื้นที่เพียงพอที่จะรองรับเนื้อหาขององค์ประกอบ
CSS จัดเตรียมคุณสมบัติที่เรียกว่าoverflowซึ่งจะบอกเบราว์เซอร์ว่าจะทำอย่างไรหากเนื้อหาของกล่องมีขนาดใหญ่กว่าตัวกล่อง คุณสมบัตินี้สามารถรับค่าใดค่าหนึ่งต่อไปนี้ -
| ซีเนียร์ | มูลค่าและรายละเอียด |
|---|---|
| 1 | visible อนุญาตให้เนื้อหาล้นขอบขององค์ประกอบที่มีอยู่ |
| 2 | hidden เนื้อหาขององค์ประกอบที่ซ้อนกันจะถูกตัดออกเพียงแค่ที่เส้นขอบขององค์ประกอบที่มีและไม่สามารถมองเห็นแถบเลื่อนได้ |
| 3 | scroll ขนาดขององค์ประกอบที่มีจะไม่เปลี่ยนแปลง แต่จะมีการเพิ่มแถบเลื่อนเพื่อให้ผู้ใช้เลื่อนเพื่อดูเนื้อหาได้ |
| 4 | auto จุดประสงค์เหมือนกับการเลื่อน แต่แถบเลื่อนจะแสดงเฉพาะในกรณีที่เนื้อหาล้น |
นี่คือตัวอย่าง -
<html>
<head>
<style type = "text/css">
.scroll {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}
</style>
</head>
<body>
<p>Example of scroll value:</p>
<div class = "scroll">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class = "auto">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -