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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: CSS Tips: Overflow การกำหนดแถบเลื่อน

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

โดย abdkode » 29/03/2019 2:21 pm

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

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

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

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

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

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

p { 
         width:120px; 
         height:100px; 
         border:1px solid; 
         overflow:auto; 
         } 
ผลลัพธ์ที่ได้คือ ถ้าหากข้อความนั้นยาวเกินไปจนหลุดกรอบ จะมีแถบเลื่อนปรากฎขึ้นโดยอัตโนมัติ
overflow3.jpg
overflow3.jpg (10.71 KiB) Viewed 3001 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; 
         }
ผลลัพธ์ที่ได้จะแสดง แถบเลื่อนเฉพาะที่เเรากำหนด
overflow2.jpg
overflow2.jpg (10.3 KiB) Viewed 3001 times
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP

ข้างบน