วิธีใช้คุณสมบัติ Overflow-y ใน CSS

บทความนี้สาธิตการใช้คุณสมบัติ CSS overflow-y พร้อมตัวอย่างมากมาย

วิธีใช้คุณสมบัติ Overflow-y ใน CSS

ซีเอสเอส “ ล้น-y คุณสมบัติ ” ใช้เพื่อควบคุมการล้นของเนื้อหาตามแนวขวางภายในองค์ประกอบ ระบุว่าจะตัดเนื้อหาหรือเพิ่มแถบเลื่อนเมื่อเนื้อหาเกินความสูงของคอนเทนเนอร์ ค่าที่เป็นไปได้สำหรับคุณสมบัตินี้คือ “ มองเห็นได้ ”, “ ที่ซ่อนอยู่ ”, “ เลื่อน ', และ ' อัตโนมัติ '.

ให้เราไปดูตัวอย่างด้านล่างเพื่อสาธิตคุณสมบัติ overflow-y ได้ดียิ่งขึ้น:

ตัวอย่างที่ 1: การใช้ Visible เป็นค่าสำหรับคุณสมบัติ Overflow-y

“ มองเห็นได้ ค่า ” ช่วยให้เนื้อหาล้นออกจากคอนเทนเนอร์ และไม่เพิ่มการตัดหรือแถบเลื่อนใดๆ เยี่ยมชมบล็อกรหัสที่ใช้งานได้จริงด้านล่าง:

คำอธิบายของบล็อกรหัสด้านบน:

• ขั้นแรก ให้กำหนดค่าของ “ พ่อแม่ ” ถึง “ ระดับ แอตทริบิวต์ ” และใช้ประโยชน์จาก “ สไตล์ ' คุณลักษณะ.
• นอกจากนี้ ให้ระบุค่าของ “ มองเห็นได้ ” ถึง CSS “ ล้น-y ' คุณสมบัติ. และกำหนดให้เท่ากับ “ สไตล์ ” แอตทริบิวต์เพื่อให้สไตล์ CSS ทำงานได้
• ถัดไป สร้างที่ซ้อนกัน “ แผนก ” องค์ประกอบและกำหนดให้เป็นคลาสของ “ เนื้อหาเด็ก '. ให้ข้อมูลจำลองกับมันด้วย

ตอนนี้ ใช้คุณสมบัติ CSS เพื่อปรับปรุงการแสดงภาพซึ่งช่วยให้เข้าใจคุณสมบัติ CSS overflow-y ได้ดีขึ้น:

คำอธิบายของคุณสมบัติ CSS ได้รับด้านล่าง:

• ประการแรก “ พ่อแม่ ” คลาสถูกเลือกและค่าของ “ 200px ”, “ 150px ', และ ' สีดำทึบ 1px ” ถูกกำหนดให้กับ CSS “ ความกว้าง ”, “ ความสูง ', และ ' ชายแดน ” คุณสมบัติตามลำดับ
• จากนั้นเลือก “ เนื้อหาเด็ก ” class และตั้งค่าของ “ 300px ' และ ' ฟ้าอ่อน ” ถึง CSS “ ความสูง ' และ ' สีพื้นหลัง ” คุณสมบัติตามลำดับ คลาสนี้ขยายไปถึง “ พ่อแม่ ” คลาสที่ถูกควบคุมโดย CSS “ ล้น ' คุณสมบัติ.

หลังจากรวบรวมตัวอย่างโค้ดแล้ว หน้าเว็บจะปรากฏดังนี้:

สแนปชอตแสดงเนื้อหาที่ล้นออกมาให้เห็นแล้ว และแถบเลื่อนหรือการตัดจะไม่ถูกเพิ่มตามค่าเริ่มต้น

ตัวอย่างที่ 2: การใช้ Hidden เป็นค่าสำหรับคุณสมบัติ Overflow-y

“ ล้น-y ” ทรัพย์สินที่มีค่า “ ที่ซ่อนอยู่ ” ซ่อนเนื้อหาทั้งหมดที่ย้ายไปนอกคอนเทนเนอร์หลัก คุณสมบัตินี้ไม่เพิ่มแถบเลื่อน แต่จะตัดเนื้อหาที่ล้นออก:

ข้อมูลโค้ดด้านบนประกอบด้วย:

• ขั้นแรก โค้ดเดิมจะถูกแทรกอีกครั้งพร้อมกับเพิ่มเนื้อหาจำลองที่อยู่ภายในองค์ประกอบ div ภายใน
• ถัดไป เปลี่ยนค่าของ “ ล้น-y ” คุณสมบัติเป็น “ ที่ซ่อนอยู่ ” ถึง “
  ” แท็กที่มีคลาสของ “ พ่อแม่ '.

หลังจากแสดงผลหน้าเว็บใหม่จะเป็นดังนี้:

สแนปชอตแสดงว่าเนื้อหาล้นถูกตัดออก

ตัวอย่างที่ 3: การใช้ Scroll เป็นค่าสำหรับคุณสมบัติ Overflow-y

การตั้งค่าของ “ ล้น-y ” คุณสมบัติให้กับ “ เลื่อน ” ช่วยให้ผู้ใช้สามารถเลื่อนดู

เนื้อหาที่ล้นออกมา ให้เราไปที่บล็อกรหัสด้านล่าง:

ในบล็อกรหัสด้านบน:

• ขั้นแรก แทรกโครงสร้าง HTML เดียวกันไว้ใน ' <เนื้อหา> ” แท็ก
• ถัดไป เปลี่ยนค่าของ “ ล้น-y ” คุณสมบัติให้กับ “ เลื่อน '. ซึ่งช่วยให้ “ พ่อแม่ ” div เพื่อเปิดใช้งานเอฟเฟกต์การเลื่อนเพื่อควบคุมเนื้อหาที่ล้น

หลังจากคอมไพล์บล็อกโค้ดด้านบนแล้ว หน้าเว็บจะมีลักษณะดังนี้:

gid ด้านบนแสดงให้เห็นว่าเอฟเฟกต์การเลื่อนพร้อมใช้งานสำหรับการควบคุมเนื้อหาที่มากเกินไป

ตัวอย่างที่ 4: การใช้ Auto เป็นค่าสำหรับคุณสมบัติ Overflow-y

ในตัวอย่างนี้ ผู้ใช้สามารถเพิ่มแถบเลื่อนได้ก็ต่อเมื่อเนื้อหาไม่พอดีกับคอนเทนเนอร์ นอกจากนี้ หากเนื้อหาไม่ล้น แถบเลื่อนจะไม่ถูกเพิ่ม เป็นไปได้โดยให้ค่าของ “ อัตโนมัติ ” ถึง CSS “ ล้น-y ' คุณสมบัติ:

ในบล็อกรหัสด้านบน:

• ขั้นแรก ให้แทรกไฟล์ HTML เดียวกันใน ' <เนื้อหา> ” แท็ก
• ถัดไป อัปเดตค่าของ “ ล้น-y ” คุณสมบัติเป็น “ อัตโนมัติ '. เปิดใช้งานเอฟเฟกต์การเลื่อนที่สัมพันธ์กับความยาวแนวตั้งของเนื้อหา

หลังจากสิ้นสุดขั้นตอนการคอมไพล์ หน้าเว็บจะทำงานดังนี้:

gif ด้านบนแสดงคุณสมบัติโอเวอร์โฟลว์ที่เปิดใช้งานแถบเลื่อนตามความยาวของเนื้อหา

บทสรุป

ซีเอสเอส “ ล้น-y คุณสมบัติ ” ใช้เพื่อควบคุมเนื้อหาที่มากเกินไปตามขวางภายในองค์ประกอบ คุณสมบัติ overflow-y ควบคุมเนื้อหาตามค่าที่ระบุให้กับคุณสมบัติ overflow-y “ ภาพ ค่า ” แสดงเนื้อหาที่ล้นออกมา ส่วน “ ที่ซ่อนอยู่ ค่า ” ซ่อนเนื้อหาที่มากเกินไป และค่า “ เลื่อน ค่า ” เพิ่มแถบเลื่อนเพื่อควบคุมเนื้อหา และถ้าค่าเป็น “ อัตโนมัติ ” แถบเลื่อนเพิ่มหรือลบตามความยาวของเนื้อหา