CSS Tips: Overflow การกำหนดแถบเลื่อน

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
โพสต์: 361
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

CSS Tips: Overflow การกำหนดแถบเลื่อน

โพสต์ที่ยังไม่ได้อ่าน โดย abdkode »

CSS overflow เป็นการควบคุมเนื้อหาจำนวนมากหรือขนาดใหญ่ ซึ่งจะให้เลือกว่าจะครอบเนื้อหาหรือเพื่อเพิ่มแถบเลื่อน โอเวอร์โฟลว์มี property ดังต่อไปนี้:
  • visible (มองเห็นได้)
  • hidden (ซ่อน)
  • scroll (เลื่อน)
  • auto (อัตโนมัน)
1.สำหรับ property visible เนื้อหาไม่ได้ถูกครอบจะมองเห็นได้นอก box element
ตัวอย่างโค้ด ดังนี้

โค้ด: เลือกทั้งหมด

<!DOCTYPE> 
<html> 
<head> 
	<style> 
		p { 
		width:100px; 
		height:80px; 
		border:1px solid; 
		overflow:visible; 
		} 
	</style> 
</head> 
<body> 
	<h2> 
		Welcome to Mindphp
	</h2> 
	<p> 
		The CSS overflow controls big content. 
		It tells whether to clip content or to add scroll bars. 
	</p> 
</body> 
</html> 
เมื่อดูผลลัพธ์จะเห็นได้ว่า ข้อความจะหลุดนอกกรอบ box element ดังรูปภาพด้านล่างนี้
overflow1.jpg
overflow1.jpg (12.45 KiB) Viewed 2999 times
2.สำหรับ property Hidden เนื้อหาส่วนที่เหลือจะมองไม่เห็น
ตัวอย่างโค้ด เปลี่ยนเป็น overflow:hidden; ดังนี้

โค้ด: เลือกทั้งหมด

 p { 
         width:100px; 
         height:80px; 
         border:1px solid; 
         overflow:hidden; 
         } 
เมื่อดูผลลัพธ์จะเห็นได้ว่า ข้อความบางส่วนที่เหลือที่เกินมาจะถูกซ่อนไว้ ดังรูปภาพด้านล่างนี้
overflow2.jpg
overflow2.jpg (10.3 KiB) Viewed 2999 times
3.สำหรับ property scroll เนื้อหาส่วนเกินจะถูกซ่อนไว้ แต่มีการเพิ่มแถบเลื่อนเพื่อดูเนื้อหาที่เหลือ แถบเลื่อนสามารถเป็นแนวนอนหรือแนวตั้งก็ได้
ตัวอย่างโค้ด เปลี่ยนเป็น overflow:scroll; ดังนี้

โค้ด: เลือกทั้งหมด

 p { 
         width:120px; 
         height:100px; 
         border:1px solid; 
         overflow:scroll; 
         } 
เมื่อดูผลลัพธ์จะเห็นได้ว่า จะมีแถบเลื่อนปรากฎขึ้นเพื่อสามารดูเนื้อหาที่เหลือได้ ดังรูปภาพด้านล่างนี้
overflow3.jpg
overflow3.jpg (10.71 KiB) Viewed 2999 times
4.สำหรับ property auto แถบเลื่อนจะปรากฎขึ้นโดยอัตโนมัติเมื่อใดก็ตามที่จำเป็น เช่นเมื่อข้อความเกินไป
ตัวอย่างโค้ด เปลี่ยนเป็น overflow:auto; ดังนี้

โค้ด: เลือกทั้งหมด

p { 
         width:120px; 
         height:100px; 
         border:1px solid; 
         overflow:auto; 
         } 
ผลลัพธ์ที่ได้คือ ถ้าหากข้อความนั้นยาวเกินไปจนหลุดกรอบ จะมีแถบเลื่อนปรากฎขึ้นโดยอัตโนมัติ
overflow4.jpg
overflow4.jpg (12.12 KiB) Viewed 2999 times
นอกเหนือจาก property ที่กล่าวมาข้างต้นแล้ว ยังมี Overflow-x และ Overflow-y propertyนี้เป็นการระบุเจาะจงเลยว่า เราต้องการแถบเลื่อนแนวตั้งหรือแนวนอน เป็นรูปแบบใด (visible, hidden ,scroll ,auto) โดย Overflow-x คือส่วนของแนวนอนและ Overflow-y คือแส่วนของแนวตั้ง

ตัวอย่างโค้ด ได้กำหนดไว่า overflow-x: scroll;(ให้มีแถบเลื่อน) และ overflow-y:hidden; (ซ่อนแถบเลื่อน) ดังนี้

โค้ด: เลือกทั้งหมด

 p { 
         width:120px; 
         height:100px; 
         border:1px solid; 
         overflow-x:scroll; 
         overflow-y:hidden; 
         }
ผลลัพธ์ที่ได้จะแสดง แถบเลื่อนเฉพาะที่เเรากำหนด
overflow5.jpg
overflow5.jpg (12.21 KiB) Viewed 2999 times
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 76