ซีเอสเอส “ ล้น คุณสมบัติ ” ใช้เพื่อควบคุมการโอเวอร์โฟลว์ของเนื้อหาสำหรับองค์ประกอบ HTML ที่เลือก เนื้อหาสามารถควบคุมได้ในทิศทางเดียวด้วยความช่วยเหลือของ ' ล้น-y ' และ ' ล้น-x ' คุณสมบัติ. คุณสมบัติ 'ล้น' ยอมรับค่าเช่น ' เลื่อน ”, “ มองเห็นได้ ”, “ ที่ซ่อนอยู่ ' และ ' อัตโนมัติ ” และฟังก์ชั่นการใช้งานแตกต่างกันไป อย่างไรก็ตาม คู่มือนี้แสดงให้เห็นถึงความแตกต่างระหว่าง overflow:scroll และ overflow:auto โดยใช้ตัวอย่างที่นำไปใช้ได้จริง
overflow:scroll แตกต่างจาก overflow:auto อย่างไร
ข้อแตกต่างที่สำคัญระหว่าง “ เลื่อน ' และ ' อัตโนมัติ ” ค่าคือว่า “ ล้น: เลื่อน ” แสดงแถบเลื่อนเสมอไม่ว่าจะจำเป็นหรือไม่ก็ตาม ซึ่งจะทำให้เสียสมาธิ ในทางกลับกัน “ ล้น: อัตโนมัติ ” จะแสดงแถบเลื่อนเมื่อเนื้อหาล้นเท่านั้น ด้วยวิธีนี้ สามารถสร้างการออกแบบที่สะอาดและคล่องตัวขึ้นซึ่งดึงดูดความสนใจของผู้ใช้ได้อย่างง่ายดาย
ตัวอย่างที่ 1: การใช้ overflow:scroll Property
ซีเอสเอส “ ล้น: เลื่อน คุณสมบัติ ” ตั้งค่าแถบเลื่อนตามค่าเริ่มต้นเพื่อควบคุมเนื้อหาที่ล้น ไม่เห็นเนื้อหาล้นจากนั้นใช้แถบเลื่อน แต่จะแสดงแถบเลื่อนแนวนอนและแนวตั้งหลังจากการคอมไพล์โค้ด แต่ผู้ใช้สามารถแก้ไขและแสดงเฉพาะแถบเลื่อนด้านข้างตามข้อกำหนดของการออกแบบ
ไปที่โค้ดด้านล่างเพื่อใช้คุณสมบัติ “overflow:scroll”:
< แผนก >
< h3 > ตัวอย่าง สำหรับ ล้น: เลื่อน h3 >
< แผนก ระดับ = 'scrollingBox เลื่อน' >
< หน้า > นี่เป็นเพียงเนื้อหาจำลองที่ใช้ สำหรับ การสาธิตความแตกต่างระหว่างการเลื่อนค่าคุณสมบัติ overflow-y และอัตโนมัติ
หน้า >
แผนก >
แผนก >
ในบล็อกรหัสด้านบน:
- ประการแรก ราก “ แผนก ” องค์ประกอบถูกสร้างขึ้นและใช้องค์ประกอบที่ซ้อนกัน “ แท็กในนั้น
- ถัดไป กำหนดคลาสของ “ กล่องเลื่อน ' และ ' เลื่อน ” ไปที่ซ้อนที่สร้างขึ้นแล้ว “
” แท็ก- สุดท้าย ให้ข้อมูลจำลองกับ ' ' และ ' ” แท็กภายใน “ แผนก ” องค์ประกอบ
หลังจากสร้างโครงสร้าง HTML ให้ใช้คุณสมบัติ CSS overflow:
< สไตล์ >
.scrollingBox {
ความกว้าง: 300px;
ความสูง: 150px;
เส้นขอบ: 1px ทึบสีเทาเข้ม;
}
.scroll {
ล้น: เลื่อน;
}
สไตล์ >คำอธิบายของโค้ด CSS ด้านบน:
- ขั้นแรก เลือก “ กล่องเลื่อน ” class และให้ค่าของ “ 300px ”, “ 150px ' และ ' สีเทาเข้มทึบ 1px ” ถึง CSS “ ความกว้าง ”, “ ความสูง ', และ ' ชายแดน ' คุณสมบัติ. คุณสมบัติเหล่านี้ใช้สำหรับกระบวนการสร้างภาพที่ดีขึ้น
- ต่อไป “ เลื่อน ” คลาสถูกเลือก และค่าของ “ เลื่อน ” จะถูกส่งผ่านไปยัง CSS “ ล้น ' คุณสมบัติ.
หลังจากสิ้นสุดขั้นตอนการรวบรวม:
เอาต์พุตด้านบนแสดงว่าเนื้อหาไม่มากเกินไป แต่มีการเพิ่มแถบเลื่อนบนแกน X และ Y
ตัวอย่างที่ 2: การใช้ overflow:auto Property
คุณสมบัติ overflow:auto เหมือนกับ overflow:scroll เนื่องจากทั้งคู่สามารถแสดงแถบเลื่อนได้ ข้อแตกต่างเพียงอย่างเดียวคือ ' ล้น: อัตโนมัติ ” เพิ่มแถบเลื่อนเมื่อเนื้อหาล้นและหากเนื้อหาไม่ล้น แถบเลื่อนจะไม่ถูกเพิ่ม ส่วนใหญ่จะใช้ในขณะที่สร้างการออกแบบเว็บที่ตอบสนองเนื่องจากธรรมชาติที่เปลี่ยนแปลงแบบไดนามิก
ตัวอย่างเช่น ไปที่รหัสด้านล่าง:
< แผนก ระดับ = 'ตัวอย่างอัตโนมัติ' >
< h3 > ตัวอย่าง สำหรับ ล้น:อัตโนมัติ h3 >
< แผนก ระดับ = 'กล่องเลื่อน' สไตล์ = 'ล้น: อัตโนมัติ' >
< หน้า > นี่เป็นเพียงเนื้อหาจำลองที่ใช้ สำหรับ การสาธิตความแตกต่างระหว่างการเลื่อนค่าคุณสมบัติ overflow-y และอัตโนมัติ
หน้า >
แผนก >
แผนก >ในบล็อกรหัสด้านบน:
- ขั้นแรก ใช้โครงสร้าง HTML เดียวกัน และข้อมูลจำลองที่จัดเตรียมให้กับ ' h3 ', และ ' หน้า ” องค์ประกอบมีการเปลี่ยนแปลง
- ต่อไป “ สไตล์ แอตทริบิวต์ ” ใช้กับส่วนซ้อนภายใน “ แผนก ” องค์ประกอบและตั้งค่าของ “ อัตโนมัติ ” ถึง CSS “ ล้น ' คุณสมบัติ.
หลังจากการประหารชีวิต “ แผนก ” องค์ประกอบตอนนี้ปรากฏดังนี้:
ภาพรวมด้านบนแสดงให้เห็นว่าแถบเลื่อนไม่ได้ถูกเพิ่มตามความยาวของเนื้อหา
เอาล่ะ สำหรับการกวาดล้างเพิ่มเติมเล็กน้อยเกี่ยวกับ “ ล้น: อัตโนมัติ ' คุณสมบัติ. ลองให้ข้อมูลจำนวนมากแก่ ' แผนก ' องค์ประกอบ. หลังจากอัปเดตโค้ดแล้ว หน้าเว็บจะมีลักษณะดังนี้:
ผลลัพธ์ยืนยันว่าแถบเลื่อนถูกเพิ่มในขณะนี้เนื่องจากมีเนื้อหาล้น
บทสรุป
“ ล้น: เลื่อน ' และ ' ล้น: อัตโนมัติ ” คุณสมบัติแตกต่างกันในสถานการณ์ที่พวกเขาเพิ่มแถบเลื่อน “overflow:scroll” จะแสดงแถบเลื่อนเสมอไม่ว่าเนื้อหาจะล้นหรือไม่ก็ตาม ขณะที่ “โอเวอร์โฟลว์:อัตโนมัติ” จะแสดงแถบเลื่อนเมื่อเนื้อหาขององค์ประกอบ HTML ที่เลือกล้นเท่านั้น ค่าของ CSS “ ล้น คุณสมบัติ ” ขึ้นอยู่กับการออกแบบเฉพาะและความต้องการประสบการณ์ของผู้ใช้ บทความนี้ได้แสดงให้เห็นความแตกต่างระหว่างคุณสมบัติ 'overflow:scroll' และ 'overflow:auto'
- ถัดไป กำหนดคลาสของ “ กล่องเลื่อน ' และ ' เลื่อน ” ไปที่ซ้อนที่สร้างขึ้นแล้ว “