สร้างกล่องด้วยการเลื่อนข้อความโดยใช้ CSS และ HTML

กล่องเลื่อน HTML คือกล่องที่เพิ่มแถบเลื่อนไปทางด้านขวาและด้านล่างเมื่อเนื้อหาของช่องมีขนาดใหญ่กว่าขนาดของช่อง กล่าวอีกนัยหนึ่งถ้าคุณมีกล่องที่สามารถใส่ได้ประมาณ 50 คำและคุณมีข้อความ 200 คำช่องทำเครื่องหมาย HTML จะใส่แถบเลื่อนขึ้นเพื่อให้คุณเห็นคำเพิ่มเติม 150 คำ ใน HTML มาตรฐานที่จะผลักดันเฉพาะข้อความนอกกรอบ

การทำ HTML scroll นั้นค่อนข้างง่าย คุณเพียงแค่ต้องตั้งค่าความกว้างและความสูงขององค์ประกอบที่คุณต้องการจะเลื่อนจากนั้นใช้คุณสมบัติ CSS overflow เพื่อกำหนดลักษณะที่คุณต้องการให้เลื่อนขึ้น

จะทำอย่างไรกับข้อความเสริม?

เมื่อคุณมีข้อความมากกว่าที่จะพอดีกับพื้นที่ในเค้าโครงของคุณคุณมีตัวเลือกไม่กี่:

• เขียนข้อความใหม่เพื่อให้สั้นลงและพอดี
• อนุญาตให้ข้อความไหลเกินกว่าขีด จำกัด และหวังว่าเค้าโครงสามารถโค้งงอเพื่อรองรับได้
• ตัดข้อความที่เป็นส่วนเกิน
• เพิ่มแถบเลื่อน (โดยปกติจะเป็นแนวตั้งสำหรับข้อความ) เพื่อให้พื้นที่เลื่อนเพื่อแสดงข้อความพิเศษ

ตัวเลือกที่ดีที่สุดคือตัวเลือกสุดท้าย: สร้างกล่องข้อความเลื่อน จากนั้นยังสามารถอ่านข้อความพิเศษได้ แต่การออกแบบของคุณจะไม่ถูกบุกรุก

HTML และ CSS สำหรับนี้จะเป็น:

overflow: auto;

บอกเบราว์เซอร์เพื่อเพิ่มแถบเลื่อนหากต้องการเพื่อให้ข้อความล้นขอบของ div แต่เพื่อให้การทำงานนี้คุณต้องมีคุณสมบัติความกว้างและความสูงที่ตั้งค่าไว้ใน div เพื่อให้มีขอบเขตล้น

นอกจากนี้คุณยังสามารถตัดข้อความโดยการเปลี่ยนล้น: อัตโนมัติ; overflow: ซ่อน; ถ้าคุณปล่อยให้พร็อพเพอร์ตี้ล้นออกข้อความจะรั่วไหลผ่านขอบเขตของ div

คุณสามารถเพิ่มแถบเลื่อนไปมากกว่าแค่ข้อความ

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

ในตัวอย่างนี้ภาพ 400x509 อยู่ภายในย่อหน้า 300x300

ตารางจะได้ประโยชน์จากแถบเลื่อน

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

วิธีที่ง่ายที่สุดก็เหมือนกับรูปภาพและข้อความเพียงเพิ่ม div ลงในตารางตั้งความกว้างและความสูงของ div นั้นและเพิ่มคุณสมบัติ overflow:

….

ชื่อ	โทรศัพท์
เจนนิเฟอร์	502-5366

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

ล้น-X

. เพียงเพิ่ม

overflow-x: ซ่อน;

ไปที่ div และจะลบแถบเลื่อนแนวนอน อย่าลืมทดสอบเพราะอาจมีเนื้อหาที่หายไป

Firefox สนับสนุนการใช้แท็ก TBODY สำหรับ Overflow

คุณลักษณะที่ดีจริงๆของเบราว์เซอร์ Firefox คือคุณสามารถใช้คุณสมบัติ overflow บนแท็กตารางภายในเช่น tbody และ thead หรือ tfoot ซึ่งหมายความว่าคุณสามารถตั้งแถบเลื่อนบนเนื้อหาของตารางและเซลล์ส่วนหัวจะคงที่เหนือกว่าได้ นี้ทำงานเฉพาะใน Firefox ซึ่งไม่ดีเกินไป แต่เป็นคุณลักษณะที่ดีถ้าผู้อ่านของคุณใช้ Firefox เท่านั้น เรียกดูตัวอย่างนี้ใน Firefox เพื่อดูว่าฉันหมายถึงอะไร

…

ชื่อ	โทรศัพท์
เจนนิเฟอร์	502-5366