นี่คือข้อความภายในเลเยอร์

ในตัวอย่างนี้ คอนเทนเนอร์แบบเลื่อนด้านข้างของเราจะกว้าง 300px โดยมี 8 รายการ ขนาด 100×100px ต่อรายการ เหล่านี้เป็นขนาดที่กำหนดเอง พวกเขาสามารถเป็นอะไรก็ได้

ความสูงของคอนเทนเนอร์จะกลายเป็น "ความกว้าง" และในทางกลับกัน ด้านล่างนี้ "ความกว้าง" ของคอนเทนเนอร์ของเราจะเท่ากับ 300px:

แนวนอน-scroll-wrapper ( กว้าง: 100px; ความสูง: 300px; overflow-y: อัตโนมัติ; overflow-x: ซ่อนเร้น; )

ตอนนี้เด็กๆ:

แนวนอน-scroll-wrapper > div ( กว้าง: 100px; ความสูง: 100px; )

ขั้นตอนที่ 2) หมุนภาชนะ

ตอนนี้เราหมุนคอนเทนเนอร์ -90 องศาด้วยการแปลง CSS และนั่นก็คือ: ตัวเลื่อนแนวนอน

แนวนอน-scroll-wrapper ( ... แปลง: หมุน (-90deg); เปลี่ยนต้นกำเนิด: ด้านบนขวา; )

มีปัญหาเล็กๆ น้อยๆ เพียงอย่างเดียวคือ ลูกๆ ของเราก็หมุนเวียนเช่นกัน และตอนนี้อะไรก็ตามที่อยู่ภายในก็อยู่ข้างๆ มัน

ขั้นตอนที่ 3) หมุนเด็กกลับตัวตรง

เราจะทำยังไงให้เด็กๆ กลับมายืนตรงอีกครั้ง? หมุนกลับโดยใช้การแปลง CSS อื่นที่ตรงกันข้าม

แนวนอน-scroll-wrapper > div ( ... แปลง: หมุน (90deg); เปลี่ยนต้นกำเนิด: ด้านบนขวา; )

ขั้นตอนที่ 4) แก้ไขตำแหน่ง

มันเริ่มดูดีแล้ว แต่ยังมีปัญหาอยู่บ้าง

ด้วยการหมุนกระดาษห่อโดยใช้มุมบนขวาเป็นจุดยึด ด้านซ้ายของเราจึงเลื่อนไปตามความกว้างของภาชนะ หากคุณพบว่าสิ่งนี้เข้าใจยาก เพียงวางนิ้วของคุณที่มุมขวาบนของหน้าแล้วหมุน วิธีแก้ปัญหา: เปลี่ยนกลับด้วย TranslationY

ดีกว่า. แต่รายการแรกยังคงหายไปเนื่องจากปรากฏการณ์เดียวกันนี้เกิดขึ้นกับรายการ เราสามารถแก้ไขได้โดยให้ขอบบนของความกว้างแก่ลูกคนแรก หรือโดยการแปลรายการทั้งหมดในลักษณะเดียวกับที่เราทำ Wrapper วิธีที่ง่ายที่สุดที่ฉันพบคือการเพิ่มช่องว่างด้านบนให้กับกระดาษห่อให้เท่ากับความกว้างของรายการ โดยสร้างบัฟเฟอร์สำหรับรายการต่างๆ

แนวนอน-scroll-wrapper ( ... แปลง: หมุน(-90deg) แปล Y(-100px); ... )

การสาธิต

นี่เป็นอีกจุดหนึ่งที่คุณสามารถเห็นเด็กที่ไม่เป็นรูปสี่เหลี่ยม:

ความเข้ากันได้

ฉันได้ทดสอบบนอุปกรณ์ที่พร้อมใช้งานทันที

เดสก์ทอป

เนื่องจากปัจจุบันการกำหนดสไตล์ของแถบเลื่อนได้รับการสนับสนุนโดย WebKit/Blink เท่านั้น Firefox และ IE จึงยังคงแสดงแถบสีเทาที่น่าเกลียด คุณสามารถดมกลิ่นนี้ด้วย JavaScript และซ่อนมันไว้ทั้งหมด แต่นั่นเป็นเนื้อหาสำหรับบทช่วยสอนอื่น

การใช้ล้อเลื่อนของเมาส์ใช้งานได้ดีบนเดสก์ท็อป แล็ปท็อปของฉันเป็นอีกเรื่องหนึ่ง ทั้งหน้าจอสัมผัสและทัชแพดทำหน้าที่เหมือนกับว่า div ไม่ได้หมุน

มือถือ

ฉันรู้สึกประหลาดใจมากที่พบว่า Android เข้าใจจริงๆ ว่าคอนเทนเนอร์ถูกหมุน และให้คุณเลื่อนไปด้านข้างโดยปัดไปทางซ้ายและขวา

iOS ในทางกลับกันเล่นได้ไม่ดีมันทำหน้าที่เหมือนคอนเทนเนอร์ไม่ได้รับการหมุน ดังนั้นคุณต้องปัดขึ้นและลงเพื่อเลื่อนไปด้านข้าง ซึ่งแน่นอนว่าขัดกับสัญชาตญาณ นอกจากนี้ การปัดไปทางซ้ายและขวาจะเลื่อนรายการขึ้นและลงในกระดาษห่อ ซึ่งเป็นเรื่องที่ไม่คาดคิดและแปลกประหลาด การตั้งค่าโอเวอร์โฟลว์เป็นซ่อนไม่ได้ช่วยบรรเทาปัญหานี้

บทสรุป

จากข้อมูลของ Can I Use ปัจจุบันการแปลง CSS ได้รับการสนับสนุนโดยผู้ใช้มากกว่า 93% (ณ เวลาที่เขียนบทความนี้ พฤศจิกายน 2559) ดังนั้นจึงไม่มีปัญหา

ระวังการใช้สิ่งนี้ในการผลิต ฉันได้ทดสอบสิ่งนี้กับอุปกรณ์บางอย่างแล้ว แต่ไม่ได้ทดสอบอย่างกว้างขวางหรือเจาะลึกเลย

ปัญหาที่ใหญ่ที่สุดคืออินพุตแบบสัมผัสที่ต้องให้คุณปัดขึ้นและลงเพื่อไปทางซ้ายและขวา วิธีแก้ไขที่เป็นไปได้คือรวมข้อความไว้บนเว็บไซต์ของคุณเพื่ออธิบายเรื่องนี้ แต่คุณจะต้องพึ่งพาผู้ที่อ่านข้อความของคุณจริงๆ และถึงอย่างนั้นมันก็ยังขัดกับสัญชาตญาณอยู่ วิธีแก้ปัญหาที่เป็นไปได้อีกวิธีหนึ่งคือจับอินพุตแบบสัมผัสด้วย JavaScript บนอุปกรณ์เหล่านั้น แต่คุณควรทำทุกอย่างใน JavaScript ดีกว่าและละทิ้งการแฮ็ก CSS นี้โดยสิ้นเชิง

ในบทความนี้ เราจะตรวจสอบรายละเอียดคุณสมบัติโอเวอร์โฟลว์พร้อมค่าทั้งหมด ซึ่งช่วยให้คุณสามารถเพิ่มหรือลบแถบเลื่อนแนวนอน/แนวตั้งได้ กล่าวอีกนัยหนึ่งคือวิธีสร้างแถบเลื่อน

โอเวอร์โฟลว์ใน CSS มีหน้าที่รับผิดชอบในการแสดงข้อมูลในบล็อกหากเนื้อหาเกินความสูงหรือความกว้างของบล็อกนี้ คุณสมบัตินี้ใช้กับองค์ประกอบบล็อกเท่านั้น (แสดง: บล็อก หรือองค์ประกอบที่เป็นบล็อกเริ่มแรก - divs ฯลฯ)

ค่าที่เป็นไปได้ที่คุณสมบัตินี้ใช้ (มองเห็นได้โดยค่าเริ่มต้น):

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

ส่วนใหญ่แล้ว คุณสมบัตินี้ใช้เพื่อลบหรือเพิ่มแถบเลื่อนให้กับองค์ประกอบ นี่คือวิธีที่พวกเขาจัดการกับเฟรมเพื่อไม่ให้อัดให้เต็มขนาด หรือจะแทรกข้อความขนาดใหญ่เพื่อไม่ให้กินพื้นที่ครึ่งหน้าแต่นั่งสบาย ๆ ในบล็อกพิเศษและสามารถเลื่อนอ่านได้ โดยส่วนใหญ่แล้ว ที่พักจะแก้ปัญหาเรื่องการแสดงข้อมูลที่สะดวกสบาย

ในการสาธิต คุณสามารถดูได้ว่ามูลค่าทรัพย์สินแต่ละรายการทำงานอย่างไรในทางปฏิบัติ:

รหัส HTML

body (ระยะขอบ:0 0 0 0; padding:0 0 60px 0; ขนาดตัวอักษร:16px;) h2 (สี:#CC0033;) div ( width:200px; /* ความกว้างคงที่ */ ความสูง: 300px; /* คงที่ ความสูง */ border:1px solid #555; padding:4px; float:left) .VisibleDiv (overflow:visible;) .HiddenDiv (overflow:hidden;).ScrollDiv (overflow:scroll;) .AutoDiv ( overflow:auto;)

ควรให้ความสนใจกับความจริงที่ว่าในกรณีนี้บล็อกมีความสูงและความกว้างคงที่ นี่เป็นสิ่งสำคัญ เช่น พิจารณาตัวเลือกเมื่อตั้งค่าความสูงของบล็อกเป็น auto :

เราเห็นว่าข้อความแสดงอย่างถูกต้องภายในบล็อกในทุกกรณี ยกเว้นความไม่สะดวกเล็กน้อยในกรณีของการเลื่อน ซึ่งแถบเลื่อนที่ไม่ได้ใช้งานปรากฏขึ้น

แต่ในกรณีนี้ก็มีอันตรายเล็กๆ น้อยๆ เกิดขึ้น ซึ่งหลายคนไม่เข้าใจว่าเหตุใดจึงเกิดขึ้นและจะแก้ไขอย่างไร ความจริงก็คือว่าถ้าบล็อกที่มีล้น: มองเห็นได้; นั่นคือค่าเริ่มต้น และเนื้อหามีองค์ประกอบที่มีค่าทศนิยมใดๆ ยกเว้น none ดังนั้นทั้งหมดนี้จะแสดงไม่ถูกต้อง เพื่อให้เข้าใจว่าสถานการณ์นี้คืออะไร ให้พิจารณาตัวอย่าง:

ด้านล่างบล็อก VisibleDiv เป็นอีกหนึ่งบล็อก

ไม่มีอะไรอยู่ภายใต้บล็อก VisibleDiv

body (ระยะขอบ:0 0 0 0; padding:0 0 60px 0; ขนาดตัวอักษร:16px;) h2 (สี:#CC0033;) p (float:left;) div ( width:500px; height:auto; border: 1px ทึบ #555; ช่องว่างภายใน: 4px; ระยะขอบ: FFFFFF; แบบอักษร-น้ำหนัก: ตัวหนา;)

ในกรณีแรก เป็นที่ชัดเจนว่าเนื้อหาที่มีคุณสมบัติ float จะเคลื่อนที่ออกนอกบล็อก และไม่ได้นำมาพิจารณาเมื่อกำหนดความสูงของบล็อก ในกรณีที่สอง ภายใต้บล็อกที่มีล้น: มองเห็นได้ ; อีกบล็อกหนึ่งถูกวางเป็นพิเศษและทาสีด้วยสีที่ต่างกัน นี่ไม่ใช่เพียงตัวอย่างเดียวที่แสดงให้เห็นว่าบล็อกดังกล่าวสามารถทำงานบนเพจได้อย่างไร (โดยมีโอเวอร์โฟลว์ : มองเห็นได้ ; และความสูง : อัตโนมัติ ; ) สิ่งนี้สามารถแก้ไขได้โดยการแทนที่ค่าที่มองเห็นด้วย ซ่อนไว้ ควรจำไว้ว่าควรระบุคุณสมบัตินี้สำหรับบล็อกที่มีความสูงเท่านั้น: auto; หากมีความสูงคงที่ ก็มีโอกาสสูงที่เนื้อหาจะถูกซ่อนหากมีขนาดใหญ่กว่าความสูงที่ระบุ

เวอร์ชันที่ได้รับการแก้ไขจะมีลักษณะดังนี้:

นอกจากนี้ คุณจะไม่มีปัญหาดังกล่าวหากบล็อกมีล้น: มองเห็นได้ ; และความสูง: อัตโนมัติ; ค่าบางส่วนของคุณสมบัติ float ก็ถูกระบุด้วย โดยทั่วไป ในหลายกรณี การแสดงองค์ประกอบจะขึ้นอยู่กับชุดของคุณสมบัติ มากกว่าคุณสมบัติแต่ละรายการ

คุณสามารถใช้ overflow-y: scroll สำหรับการเลื่อนแนวตั้ง

คุณสมบัติโอเวอร์โฟลว์จะควบคุมการแสดงเนื้อหาขององค์ประกอบบล็อกหากเนื้อหาทั้งหมดไม่พอดีและขยายเกินขอบเขตของมิติที่ระบุ

ข้อมูลโดยย่อ

การกำหนด

ค่านิยม

มองเห็นได้ แสดงเนื้อหาทั้งหมดขององค์ประกอบ แม้ว่าจะเกินความสูงและความกว้างที่ระบุก็ตาม ซ่อนไว้ แสดงเฉพาะพื้นที่ภายในองค์ประกอบ ส่วนที่เหลือจะถูกซ่อน scroll แถบเลื่อนจะถูกเพิ่มเสมอ แถบเลื่อนอัตโนมัติจะถูกเพิ่มเมื่อจำเป็นเท่านั้น

แซนด์บ็อกซ์

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

div ( ความสูง: 80px; ล้น: อัตโนมัติ ; )

ตัวอย่าง

ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 1.

ข้าว. 1. การใช้คุณสมบัติล้น

แบบจำลองวัตถุ

วัตถุ.style.ล้น

บันทึก

Internet Explorer สูงถึงเวอร์ชัน 7.0 รวมถึง:

• องค์ประกอบลูกที่มีตำแหน่งค่อนข้างซึ่งมีค่าโอเวอร์โฟลว์ถูกตั้งค่าเป็นอัตโนมัติหรือเลื่อนจะทำงานเหมือนกับว่ามีตำแหน่ง : คงที่

อินเทอร์เน็ตเอ็กซ์พลอเรอร์ 8:

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

Firefox 3.6 ใช้การโอเวอร์โฟลว์กับกลุ่มเซลล์ตารางไม่ถูกต้อง ( , , ).

ข้อมูลจำเพาะ

ข้อมูลจำเพาะแต่ละอย่างต้องผ่านการอนุมัติหลายขั้นตอน

• คำแนะนำ - ข้อมูลจำเพาะได้รับการอนุมัติจาก W3C และแนะนำให้ใช้เป็นมาตรฐาน
• คำแนะนำผู้สมัคร ( คำแนะนำที่เป็นไปได้) - กลุ่มที่รับผิดชอบมาตรฐานพอใจว่าบรรลุเป้าหมาย แต่ต้องการความช่วยเหลือจากชุมชนการพัฒนาเพื่อนำมาตรฐานไปใช้
• ข้อเสนอแนะที่เสนอ ข้อแนะนำ) - ในขั้นตอนนี้ เอกสารจะถูกส่งไปยังสภาที่ปรึกษา W3C เพื่อขออนุมัติขั้นสุดท้าย
• Working Draft - ร่างฉบับสมบูรณ์ยิ่งขึ้นซึ่งได้รับการหารือและแก้ไขเพื่อการตรวจสอบของชุมชน
• ร่างบรรณาธิการ ( ร่างบรรณาธิการ) - เวอร์ชันร่างของมาตรฐานหลังจากมีการเปลี่ยนแปลงโดยบรรณาธิการโครงการ
• ร่าง ( ข้อกำหนดฉบับร่าง) - เวอร์ชันร่างแรกของมาตรฐาน