how to hide a vertical scroll bar when not needed

Question

I have a textarea which is contained in a div as I have jquery hint and wanted to use opacity without changing the border. There is a visible vertical scroll bar how I only want this displayed when I am typing in the text field and it goes beyond the container. I have tried overflow: auto; but does not work.

Textfield:

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

Styles:

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

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

Possible duplicate of [CSS hide scroll bar if not needed](https://stackoverflow.com/questions/18716863/css-hide-scroll-bar-if-not-needed) — Eren Tantekin, Nov 21 '18 at 07:49

score 222 · Accepted Answer · answered Mar 05 '12 at 01:38

overflow: auto (or overflow-y: auto) is the correct way to go.

The problem is that your text area is taller than your div. The div ends up cutting off the textbox, so even though it looks like it should start scrolling when the text is taller than 159px it won't start scrolling until the text is taller than 400px which is the height of the textbox.

Try this: http://jsfiddle.net/G9rfq/1/

I set overflow:auto on the text box, and made the textbox the same size as the div.

Also I don't believe it's valid to have a div inside a label, the browser will render it, but it might cause some funky stuff to happen. Also your div isn't closed.

How to make this solution work when we have customized the scrollbar using -webkit-scrollbar psuedo element. ? because if overflow is auto psuedo elements arent working.... I want to customize my scrollbar as well as hide then when not needed ? — Kpatel1989, Apr 27 '15 at 08:37

score 3 · Answer 2 · answered Mar 05 '12 at 00:41

3

overflow: auto; or overflow: hidden; should do it I think.

answered Mar 05 '12 at 00:41

Boris Bachovski

642
2
12
22

As I have said in my question overflow: auto; does not work :( – Lukus Mar 05 '12 at 00:47
hidden hides the scroll bar but once the texts passes the div it does not display the scroll bar so cannot scroll down to see rest of text – Lukus Mar 05 '12 at 00:51
I've just tested it and it works fine. What browser are you using? – Boris Bachovski Mar 05 '12 at 00:54
i am using firefox but in IE hidden shows the scroll bar no matter if text passes div and with auto once it passes the DIV container the scroll bar doesnt show – Lukus Mar 05 '12 at 01:00
Try adding `position: relative;` on the `#name div` – Boris Bachovski Mar 05 '12 at 01:02
I came up onto this : `http://www.defusion.org.uk/archives/2007/04/02/when-overflow-hidden-doesnt-hide-in-ie/` – Boris Bachovski Mar 05 '12 at 01:03
interesting but what is the child and what is the parent? – Lukus Mar 05 '12 at 01:07
The DIV and the TEXTAREA should not have same ID mate, I just saw. The DIV is the parent and the Textarea is the child. Let me know how you go... – Boris Bachovski Mar 05 '12 at 01:11
Thanks I have editted my post above. can you check it pretty sure its right but its still not working :( – Lukus Mar 05 '12 at 01:18
Not quite right :). You need to change the ID. So ` – Boris Bachovski Mar 05 '12 at 01:22
I'm at work don't have IE atm, but I'm more than happy to help later if still not resolved. Cheers – Boris Bachovski Mar 05 '12 at 01:28
Your DIV tag is not closed after the textarea. Try fix that and see if it works... – Boris Bachovski Mar 05 '12 at 01:31
@Lukus The problem is the textbox is larger than the div so it looks like it's not working. If you typed enough text so that it exceeded the size of the textbox you would see a half a scrollbar because the other half is cut off by the div being too small to fit the textbox. See my answer. – Davy8 Mar 05 '12 at 01:44

score 2 · Answer 3 · edited Mar 16 '17 at 13:50

2

Add this class in .css class

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

and use the class in div. like here.

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

I have attached image , you see the out put of the above code enter image description here

edited Mar 16 '17 at 13:50

Ravish

2,383
4
37
55

answered Mar 06 '13 at 10:01

DareDevil

5,249
6
50
88

how to hide a vertical scroll bar when not needed

3 Answers3

Linked