ความแตกต่างระหว่าง HTML“ overflow: auto” และ“ overflow: scroll”

เมื่อฉันกำลังศึกษาoverflowค่าของคุณสมบัติฉันพบค่าสองค่านี้: autoและscrollซึ่งจะเพิ่มแถบเลื่อนหากเนื้อหาล้นองค์ประกอบ

ใครช่วยอธิบายหน่อยได้ไหมว่าอะไรคือความแตกต่างระหว่างพวกเขา?

อัตโนมัติจะแสดงแถบเลื่อนเฉพาะเมื่อมีการตัดเนื้อหาใด ๆ

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

overflow: scrollจะซ่อนเนื้อหาที่ล้นทั้งหมดและทำให้แถบเลื่อนปรากฏในองค์ประกอบที่เป็นปัญหา หากเนื้อหาไม่ล้นแถบเลื่อนจะยังคงมองเห็นได้ แต่ปิดใช้งาน

overflow: auto คล้ายกันมาก แต่แถบเลื่อนจะปรากฏเฉพาะเมื่อเนื้อหาล้น

มีคำอธิบายที่คล้ายกันที่นี่พร้อมภาพหน้าจอบางส่วนเพื่อแสดงประเด็น

ลองดูที่เคล็ดลับ CSS

อัตโนมัติจะแสดงแถบเลื่อนก็ต่อเมื่อเนื้อหาล้น แต่การเลื่อนจะแสดงแถบเลื่อนเสมอไม่ว่าเนื้อหาจะล้นหรือไม่ก็ตาม

การเพิ่มจุดให้คำตอบOverflow:autoไม่ได้ทำงานใน 7 เมื่อตำแหน่งของภาชนะที่เป็นที่แน่นอนตำแหน่งญาติล้น IE7 แต่การตั้งค่าOverflow:scrollใช้งานได้

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

https://css-tricks.com/the-css-overflow-property/

ใน Windows โอเวอร์โฟลว์: scroll จะแสดงแถบเลื่อนและโอเวอร์โฟลว์เสมอ: อัตโนมัติจะแสดงแถบเลื่อนก็ต่อเมื่อเนื้อหาล้น ใน macOS โอเวอร์โฟลว์: เลื่อนและโอเวอร์โฟลว์: อัตโนมัติจะแสดงแถบเลื่อนเสมอหากเนื้อหาล้น ทดสอบใน Chrome ฉันขอแนะนำให้ใช้ overflow: auto เนื่องจากมันทำงานในลักษณะเดียวกันและไม่สร้างปัญหาใน windows