กำหนดให้ แสดง scrollbar เมื่อต้องการ

เราสามารถกำหนดให้ layer ต่างๆ เช่น div p หรือ span สามารถแสดง scrollbar ได้ครับ ด้วยการกำหนด property overflow ให้เป็น scroll หรือ เป็น auto

<style type="text/css">

#scroll_demo {

  width:100px;

  height:100px;

  border:1px solid red;

  overflow:auto;

}

</style>

<div id="scroll_demo">

  <div>

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />

  </div>

</div>

จากตัวอย่าง เนื้อหาจะอยู่ใน layer ชั้นใน และเนื้อหามีขนาดยาวเกินกรอบ จะทำให้ div ชั้นนอก แสดง scrollbar เพื่อให้มองเห็นได้ทั้งหมด ซึ่งหากกำหนดให้ overflow เป็น auto แล้ว หากเนื้อหาไม่ยาวเกินกรอบ ก็จะไม่แสดง scrollbar ครับ ต่างจากการกำหนดให้เป็น scroll ซี่งจะเห็น scrollbar ตลอดเวลา

ในการกำหนด overflow นี้ เรามักใช้ในการกำหนดเพื่อให้ browser แสดงผลข้อความที่ยาวเกินกรอบได้โดยที่ไม่ต้องขยายกรอบ (เช่นในกรณีที่พิมพ์ข้อความติดกัน) และทำให้เว็บเสียรูปไป และยังให้สามารถอ่านข้อความได้ครบถ้วนเหมือนเดิม ซึ่งสิ่งสำคัญในการกำหนด overflow ให้ได้ผล คือ มักต้องกำหนดร่วมกับการกำหนดความกว้าง(และสูง)

[ex]

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

[/ex]