วิธีซ่อนแถบเลื่อนแนวตั้งเมื่อไม่จำเป็น

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

ช่องข้อความ:

<label>
    <div id="name">
        <textarea name="message" type="text" id="message"
            title="Enter Message Here"
            rows=9 cols=60 maxlength="2000"></textarea>
    </div>
</label>

รูปแบบ:

#name { 
    border: 1px solid #c810ca;
    width: 270px;
    height:159px;
    overflow: hidden; 
    position: relative;
    }

#message {
    height: 400px;
    width: 235px;
    overflow: hidden;
    position: absolute;
}

overflow: auto(หรือoverflow-y: auto) เป็นวิธีไปที่ถูกต้อง

ปัญหาคือพื้นที่ข้อความของคุณสูงกว่า div div จบลงด้วยการตัดกล่องข้อความออกไปดังนั้นแม้ว่าจะดูเหมือนว่าควรเริ่มเลื่อนเมื่อข้อความสูงกว่าที่159pxจะไม่เริ่มเลื่อนจนกว่าข้อความจะสูงกว่า400pxความสูงของกล่องข้อความ

ลองดู: http://jsfiddle.net/G9rfq/1/

ฉันตั้งค่า overflow: อัตโนมัติในกล่องข้อความและทำให้ textbox มีขนาดเท่ากับ div

นอกจากนี้ฉันไม่เชื่อว่ามันถูกต้องที่จะมีdivภายในlabelเบราว์เซอร์จะแสดงผล แต่มันอาจทำให้มีบางสิ่งที่ขี้ขลาดเกิดขึ้น ของคุณยังdivไม่ปิด

overflow: auto;หรือoverflow: hidden;ควรทำอย่างที่คิด

เพิ่มคลาสนี้ในคลาส. css

.scrol  { 
font: bold 14px Arial; 
border:1px solid black; 
width:100% ; 
color:#616D7E; 
height:20px; 
overflow:scroll; 
overflow-y:scroll;
overflow-x:hidden;
}

และใช้คลาสใน div ชอบที่นี่.

<div> <p class = "scrol" id = "title">-</p></div>

ฉันได้แนบรูปภาพคุณเห็นรหัสด้านบน