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

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

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

abdkode
PHP Super Member
PHP Super Member
Posts: 362
Joined: 07/01/2019 9:56 am

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

Post by abdkode » 29/03/2019 2:21 pm

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

Code: Select all

<!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 668 times
2.สำหรับ property Hidden เนื้อหาส่วนที่เหลือจะมองไม่เห็น
ตัวอย่างโค้ด เปลี่ยนเป็น overflow:hidden; ดังนี้

Code: Select all

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

Code: Select all

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

Code: Select all

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

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

Code: Select all

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

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 27 guests