คำอธิบาย
ล้นสถานที่ให้บริการจะกำหนดวิธีการเนื้อหาที่ล้นพื้นที่เนื้อหาองค์ประกอบของมันควรจะจัดการ
ค่าที่เป็นไปได้
visible - ควรแสดงเนื้อหาที่มากเกินไป
hidden - ไม่ควรแสดงเนื้อหามากเกินไป
scroll - ไม่ควรแสดงเนื้อหาที่มากเกินไป แต่ตัวแทนผู้ใช้ควรมีวิธีการเข้าถึงเนื้อหาที่ซ่อนอยู่ (เช่นชุดแถบเลื่อน)
auto - พฤติกรรมที่เกิดจากค่านี้ขึ้นอยู่กับเบราว์เซอร์
นำไปใช้กับ
องค์ประกอบ HTML ทั้งหมด
ไวยากรณ์ DOM
object.style.overflow = "scroll";
ตัวอย่าง
นี่คือตัวอย่าง -
<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>
สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -