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

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

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

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

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) เปิดดู 93 ครั้ง


2.สำหรับ property Hidden เนื้อหาส่วนที่เหลือจะมองไม่เห็น
ตัวอย่างโค้ด เปลี่ยนเป็น overflow:hidden; ดังนี้

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

 p {
         width:100px;
         height:80px;
         border:1px solid;
         overflow:hidden;
         }

เมื่อดูผลลัพธ์จะเห็นได้ว่า ข้อความบางส่วนที่เหลือที่เกินมาจะถูกซ่อนไว้ ดังรูปภาพด้านล่างนี้
overflow2.jpg
overflow2.jpg (10.3 KiB) เปิดดู 93 ครั้ง


3.สำหรับ property scroll เนื้อหาส่วนเกินจะถูกซ่อนไว้ แต่มีการเพิ่มแถบเลื่อนเพื่อดูเนื้อหาที่เหลือ แถบเลื่อนสามารถเป็นแนวนอนหรือแนวตั้งก็ได้
ตัวอย่างโค้ด เปลี่ยนเป็น overflow:scroll; ดังนี้

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

 p {
         width:120px;
         height:100px;
         border:1px solid;
         overflow:scroll;
         }

เมื่อดูผลลัพธ์จะเห็นได้ว่า จะมีแถบเลื่อนปรากฎขึ้นเพื่อสามารดูเนื้อหาที่เหลือได้ ดังรูปภาพด้านล่างนี้
overflow3.jpg
overflow3.jpg (10.71 KiB) เปิดดู 93 ครั้ง


4.สำหรับ property auto แถบเลื่อนจะปรากฎขึ้นโดยอัตโนมัติเมื่อใดก็ตามที่จำเป็น เช่นเมื่อข้อความเกินไป
ตัวอย่างโค้ด เปลี่ยนเป็น overflow:auto; ดังนี้

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

p {
         width:120px;
         height:100px;
         border:1px solid;
         overflow:auto;
         }

ผลลัพธ์ที่ได้คือ ถ้าหากข้อความนั้นยาวเกินไปจนหลุดกรอบ จะมีแถบเลื่อนปรากฎขึ้นโดยอัตโนมัติ
overflow4.jpg
overflow4.jpg (12.12 KiB) เปิดดู 93 ครั้ง


นอกเหนือจาก 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) เปิดดู 93 ครั้ง


ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 4 และ บุคคลทั่วไป 0 ท่าน