Home > CSS techniques > ทำ div ให้เป็น scroll

ทำ div ให้เป็น scroll


เห็นมีคนถามกันเข้ามาเยอะเลยว่า ในเว็บไซต์ ต่างประเทศ เค้าทำ div ให้เป็น scroll ได้  อยากทำได้บ้าง จริงๆแล้วไม่ยากเลย ใช้แค่ property ตัวเดียวเท่านั้นเอง สามารถนำไปใช้แทน <iframe> ได้เลยครับ

เขียน css ดังนี้
<style type=”text/css”>
.longtext{width:250px;height:150px;overflow:scroll;}
</style>

html ดังนี้
<div class=”longtext”>
เนื้อหา text
</div>

ตัวอย่างดูด้านใน

กำหนดความกว้าง ความสูงของ div ได้ตามต้องการ แล้วใส่ overflow:scroll แปลว่า ส่วนเกินขอบเขต ให้เป็น scroll ครับ ทำเองก็ได้ง่ายจัง o:-)

ตัวอย่าง (ใส่ background เพิ่มเองนะ)

test test test

test test test

test test test

test test test

test test test

test test test

test test test

Related Articles

  • Share/Bookmark
Categories: CSS techniques
Tags:

About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. May 17th, 2007 at 23:13 | #1

    โอวว เพิ่งรู้นะเนี่ย ง่าย ๆ แบบนี้เลย :o

    ขอบคุณมากค่ะ

  2. May 18th, 2007 at 16:20 | #2

    เวลาข้อมูลไม่เกิดขนาด ก็จะเกิด Scrollbar นะครับ

    ดังนั้น ถ้าไม่อยากให้มันขึ้น Scrollbar ให้แก้ตรง overflow:scroll; เป็น overflow:auto; แทนก็ได้น่ะครับ :)>-

  3. May 18th, 2007 at 21:10 | #3

    ผมใช้ overflow:auto ตลอด

  4. May 20th, 2007 at 19:05 | #4

    แบบนี้โค้ดจะได้ไม่กินเนื้อที่แสดงผลของเพจด้วยครับ ดีจัง
    ขอบคุณครับ :cool:

  5. cape
    September 6th, 2007 at 18:49 | #5

    ขอบคุณค่ะ กำลังหาอยู่พอดีเลย :d

  6. December 6th, 2009 at 12:58 | #6

    Thank you for good information

  7. December 6th, 2009 at 13:10 | #7

    แบบนี้ต้องลองครับ

  1. No trackbacks yet.