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
Related
How to add scroll to a block element?
I've used overflow-y: scroll, but it immediately creates a scrollbar. I want scrolling after my div has reached a specific height.
You should use overflow-y: auto to get scroll after fulfilling the height of an element.
auto Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows. - MDN
Whereas scroll Content is clipped if necessary to fit vertically in the padding box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content. - MDN
First you have to give a proper height and width of your content area where you have to overflow.
You have a <div> which has more content than your area than you can use overflow tag with scroll.....
width: #;
height: #;
overflow: scroll;
I have set overflow-y : visible but it acts like scroll. I need overflow-x: scroll;overflow-y: visible. How can I set them both? my table need horizontal scrollbar. I have a dropdown list. but dropdown list is floating inside the table it is not coming outwards. while dropdown is appearing vertical scroll bar also coming
I found that if we give overflow-y: visible; overflow-x: scroll; then it will not work both will act as overflow scroll.
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 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.
In IE, scrollbars appear on the inside of a div - which you could argue is the correct solution. Other browsers, e.g. Chrome, place the scrollbars on the outside of the content.
If I want to always a vertical scrollbar visible for the div, as below:
<div style="height: 200px; overflow-y: scroll;">
<div style="height: 200px; width: 100%; background: #DDD;"></div>
</div>
In IE; because there is a vertical scrollbar, it means the scrollbar is hiding some content behind it and shows a horizontal scrollbar to see the content (and then shows there is vertical content to scroll to to make up for the new scrollbar!). In Chrome, the vertical scrollbar pushes the content in, so that there is no hidden content and therefore, the horizontal scrollbar does not appear.
I want all content visible. Is there a simple cross browser way to get the scrollbars to display consistently?
Ultimately, I have a 100% width table and I just want to scroll it vertically with a fixed height.
I am running in IE7 standards, IE8 seems to deal with scrollbars the same as Chrome etc..
Adjust the width of the table, so that it won't exceed the length of the scroll bar.
I generally think it's just a problem with the way IE works.