ฉันจะทำให้แถบเลื่อนบน div สามารถมองเห็นได้เฉพาะเมื่อจำเป็นเท่านั้น

ฉันมี div นี้:

<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>

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

overflow: autoใช้ แถบเลื่อนจะปรากฏขึ้นเมื่อจำเป็นเท่านั้น

(Sidenote คุณสามารถระบุได้เฉพาะแถบเลื่อน x หรือ y เท่านั้นoverflow-x: autoและoverflow-y: auto)

ลองนี้:

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>

ลอง

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>

ลอง

<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">

ฉันพบว่า div ส่วนสูงยังคงแสดงเมื่อมีข้อความหรือไม่ ดังนั้นคุณสามารถใช้สิ่งนี้เพื่อผลลัพธ์ที่ดีที่สุด

<div style=" overflow:auto;max-height:300px; max-width:300px;"></div>

คุณสามารถลองหนึ่งรายการด้านล่าง:

  <div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>