CSS hide scroll bar if not needed
Set overflow-y
property to auto
, or remove the property altogether if it is not inherited.
How to make scrollbar disappear when not needed?
Use the overflow-y: auto;
CSS attribute. it then only shows the scrollbar when required
how to hide a vertical scroll bar when not needed
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.
Hide scrollbar in pre if not needed
Use:
overflow-x: auto;
auto
tells the browser to only show a scrollbar if the content exceeds the width of the box.
Hide scroll bar, but while still being able to scroll
Just a test which is working fine.
#parent{
width: 100%;
height: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
Working Fiddle
JavaScript:
Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth
, the exact scrollbar width will show up.
JavaScript Working Fiddle
Or
Using Position: absolute
,
#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
Working Fiddle
JavaScript Working Fiddle
Information:
Based on this answer, I created a simple scroll plugin.
CSS - Hide scroll bar in div without fixed width
You can add a div wrap around you current div and make the wrapper div overflow: hidden
. Change the inner div's with to `calc(100% + 20px).
For example:
private hideScrollbar(): void {
this.parentNode = this.el.nativeElement.parentNode;
this.wrapper = document.createElement('div');
this.wrapper.style.width = this.el.nativeElement.offsetWidth + 'px';
this.wrapper.style.height = this.el.nativeElement.offsetHeight + 'px';
this.wrapper.style.overflow = 'hidden';
this.el.nativeElement.style.width = 'calc(100% + 20px)';
this.el.nativeElement.style.height = 'calc(100% + 20px)';
// set the wrapper as child (instead of the element)
this.parentNode.replaceChild(this.wrapper, this.el.nativeElement);
// set element as child of wrapper
this.wrapper.appendChild(this.el.nativeElement);
}
You can find more details of the above code in Angular2-drag-scroll
CSS hide scroll bar, but have element scrollable
You can hide it:
html {
overflow: scroll;
}
::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}
For further information, see: Hide scroll bar, but while still being able to scroll
Related Topics
Uiwebview with Contenteditable (HTML Editing), First Responder Handling
How to Have Two Items on Opposite Sides on The Same Line
What Is The Correct Readonly Attribute Syntax for Input Text Elements
Making an Svg Image Object Clickable with Onclick, Avoiding Absolute Positioning
HTML - Two Tables Side by Side
How to Force Download with HTML/JavaScript
File Opens Instead of Downloading in Internet Explorer in a Href Link
How to Handle Xml/HTML in Git Feature Branch Workflow
How to Make a Div with Irregular Shapes with CSS3 and HTML5
Set CSS Border to End in a 90 Instead of a 45 Degree Angle
Ajax HTML Vs Xml/JSON Responses - Performance or Other Reasons
How to Pretty-Print HTML with Nokogiri
Regex to Match All HTML Tags Except <P> and </P>