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;
Related
I display 2 graphics either side of my page content. When the browser/page width narrows these items are cropped off the screen to allow more room for the content. This is mainly
.page {
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
min-width: 960px;
}
That all works fine but I have a min-width set on the .page div which wraps around all the content and is the next element after the opening body tag. I've just realised that when the browser width goes below the min-width the vertical scroll bar disappears from the side of the page.
Here's a CodePen of the issue: https://codepen.io/moy/pen/oemBEN
Presumably that is because the body is now in view but the .page element remains at it's set min-width ...makes sense.
However, the reason I set the overflow on the .page element in the first place is because of an issue I was having when it was set on the body. An issue I thought I'd resolved by applying the code this way.
If I move the following code to the body:
overflow-x: hidden;
overflow-y: auto;
All appears to work as I'd like it to. The items either side of the content area are cropped and the vertical scroll bar remains in view when the content is long enough in Chrome + FireFox on Mac. If I check the page in Safari (Mac) or IE on Windows the side items are't cropped correctly.
If you scale the browser down and then click on the background and drag right you can reveal the cropped area of the page and it looks messy!
Is there a way around this? Or will I need to make do with the vertical scroll bar hiding?
You can use the flex layout for this:
https://codepen.io/anon/pen/EvrXmG
The .container element starts the flex layout.
The .img elements have a width and flex-basis set to it and are not allowed to grow but to shrink, resulting in a "max-width".
The .wrap elements have a width and flex-basis set to it and is not allowed to shrink but to grow, resulting in a "min-width".
If the page gets bigger the .img elements stay at the max size but the content acquires all free space.
if the page gets smaller, the content stays at its minimal width ant the image elements start to disappear.
This solution is probably not safe for old browsers but one of the easiest solutions for modern browsers Browser compatibility.
I have an absolutely positioned div, with overflow:auto.
When it overflows vertically, a vertical scrollbar appears. This appears within my div (even though it isn't fixed width), which shrinks the space available to the div's contents. In my case, it causes the text to wrap unnecessarily, which is undesirable.
See https://jsfiddle.net/hktgcrj0/ - shrink the page until the div overflows and the scroll bar appears - you will see the text wrap.
Is there any way to make the scrollbar appear outside of the div, or increase the width of the div to accommodate the scroll bar?
Note that for my application (the fiddle is massively simplified) giving the div a fixed width is not an option, and disabling text wrapping is also not an option.
Try adding:
div {
white-space: nowrap;
}
or wrap the inner elements in <p> tags and apply white-space: nowrap; to that.
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.
I have a div set with overflow:auto and also height: auto. The div contains text data and a big image.
I have verified using firebug these attributes are being applied fine, but still scrollbar appears vertically. I will like div to expand automatically to required height.
I have centered the contents of my page by wrapping the page contents in a wrapper div and then putting this in the stylesheet:
#wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
}
The issue is: Whenever the content increases and the vertical scrollbar appears, it displaces the content because the size of the viewport has changed. How can we make sure that the position of the centered content doesn't change regardless of the scrollbar visibility?
Because your content is positioned relative to the size of the window (margin-left: auto; margin-right: auto) when the width of the page changes (when the scroll bar appears) the position of your content changes as well.
In order to fix this you could specify an absolute position for your content on the page using this: postion:absolute
Another option is to use the overflow-y property in order to specify whether or not to clip the content that overflows onto the elements content.
html {overflow-y:scroll;}