I tried incorporating scroll to my overflowing div element in CSS
using the overflow property. But it is attaching both vertical and horizontal scrollbars. I only need vertical scroll. How can I accomplish this with the least lines of code and no javascript or frameworks? Thanks.
.div{
overflow: scroll;
}
overflow-x for horizontal scroll
overflow-y for vertical scroll
So...
.div { overflow-y: scroll; }
Read more at MDN:
overflow-y
overflow-x
overflow
Related
I have a div with the following css:
overflow: scroll;
However, it appears that there's a border being added by the browser (?) where the scrollbar should appear if it was visible (even if it is not visible). I have inspected the css within dev tools, and cannot find a reference to this styling. How do I hide this scrollbar styling?
Here's an example screenshot - the red arrow points at the right edge of the screen, I did not add that border styling. It disappears if I remove the overflow: scroll; style rule.
Note, I am seeing this behavior in both Chrome and Safari (latest versions of both).
Setting the overflow property to 'scroll' clips the content to size. This prevents the content from exceeding it's container borders horizontally and vertically. It also places a scrollbar horizontally and vertically, regardless of whether it is needed or not.
This will display both scroll bars:
<div id="div1">
Content
</div>
#div1 {
overflow:scroll;
}
The 'auto' value will display a scroll bar vertically, horizontally or both as required.
Change the CSS to:
#div1 {
overflow:auto;
}
You can also set the overflow property for horizontal or vertical only. You can use this over auto if you want to guarantee there can't be a vertical scroll bar.
Change the CSS to:
#div1 {
overflow-x:scroll; /* Set the overflow horizontal property to clip the content
and display a horizontal scroll bar. */
}
overflow-y:hidden; /* Set the overflow vertical property to clip the content,
hide the vertical scroll bar and any content outside of the top/bottom borders. */
}
I have a div with the property:
overflow-y: scroll;
On IE11 (havent tested other versions of IE yet) the div has a vertical grey scroll bar. Is there a way to remove this? But still maintain the overflow scroll?
I searched SO for an answer but only could find one relating to the body scroll bars and not a div.
Use auto property
overflow-y: auto;
scroll will always add scrollbar whether content is overflown or not. Using auto will show the scrollbar only when content is overflown.
MDN Doc
I want that the scollbar is hidden but you can still scroll.
if I now do:
body{
overflow-y:hidden
}
the vertical scroll is hidden but you can't scroll.
my question: is there a way to hide the scrollbar but you can still scroll?
You can try to add padding-right:20px; and overflow-x:hidden; to the overflowing element, hiding the scrollbar. Not sure if it works on body though.
I have a div with propertie overflow auto. How to make the content of this div horizontally aligned with and without the scrollbar displayed. The scrollbar is messing with the div width. I hope you understand.
overflow-x: scroll;
overflow-y: hidden;
source: Div with horizontal scrolling only
Try using overflow-y: overlay instead.
.your-content{
overflow-y: overlay;
}
NOTE::: overflow-y: overlay has been deprecated.
But this will make the scrollbar appear as an overlay without affecting the width of div or element.
Is it possible to achieve only horizontal overflow in CSS 2.1?
overflow: auto;
Will cause a block element to have both horizontal and vertical scrollbars. I want a block element (let's say <div>) which will display only horizontal scrollbars. How do I do that?
Try overflow-x: auto;
It even works in IE6!
I tried overflow-x: hidden; and that worked for me.
overflow-x: clip;
Was what I needed