I know there is an insanely simple solution to this, but for the life of me I just can't get it. I have a site, where the content width is 848px (strange I know), but there is an absolutely positioned div outside of it all with a width of 1496px. They are centrally aligned with one another, and I need a scrollbar to be added ONLY once the window is resized to be more narrow than the 848px. check it out at brianbattenfeld.com/fingers/
You could always use CSS Media Queries to detect the width of the browser then you could add scroll bars to the page/elements you want. I couldn't quite work out if you were after horizontal or vertical scrollbars when when the wideth gets to 848px as currently there is no horizontal scroll bars at all.
Maybe something like this would work (haven't tested as is only a rough guide)
#media (min-width:848px) {
html {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
}
}
Hope this is useful!
Related
Sorry for the terrible title, but I couldn't describe my issue succinctly enough.
I'm noticing a weird behaviour having to do with the scrollbars.
I have a fixed menu on the left side of my web page. The menu is scrollable if the number of options inside are several.
JSFiddle example
When you scroll the menu, the scroll bar appears and is superimposed over the content. I'm okay with that... IF that's the case every time!
It used to be that the style:
overflow-y: scroll
would force a vertical scroll bar to be visible all the time and taking up its own space as part of the containing div's width. So what I ended up doing is having a fixed-sized outer div and then an inner div that's just 15px wider to hide the scroll bar.
#outer {
width: 200px;
overflow: hidden;
}
#inner {
width: 215px;
overflow-y: scroll;
}
But this behaviour doesn't seem to be consistent. At work, with the above styles, everything shows up just fine. The buttons sit at the right edge and do no get cut off on the right. But when I get home, or just am working elsewhere, the scrollbar does that hover-over thing, and now the buttons are extending off the edge and partially hidden.
I thought it might have been a cross-browser issue at first, but it's not. Has anyone met with this problem? Thanks!
P.S. - Before anyone mentions some 3rd-party menu/sidebar code. That's a no go. I have tried some, but because of work-specific requirements, I figured it's easier for me to write this myself rather than fight any quirks that disagree with our needs.
Days ago I made a simple splash screen that is currently fixed and sets a cookie when the user clicks the button (to never appear again).
Basically, It is just a div that appears in front of the main content of the page.
My problem is that even though the splash screen uses all the width and height, the scrollbar keeps appearing. I did not care about this at the first time, as it was position:fixed'd and the content was always there, impossible to move with scroll up or down.
Today I saw that on mobiles, when you scroll, sometimes you can see the content behind the splash screen.
So the main problem is the scroll bar. Therefore I decided to hide the scroll bar at all costs.
But overflow:hidden does not work.
It does not work also if I put position: relative to the parent of the splash.
How can I disable the scroll? Is there anyway I can do it with CSS? Should I use javascript to solve the problem?
Here is a fiddle of my splash and my home page:
http://jsfiddle.net/tomas2387/G8M4D/
As you can see, the splash screen is in front, but the scrolling is there, even though I use overflow:hidden.
Thanks
Adding:
html,body{
overflow:hidden;
}
Works for me
Alternatively- depending what you're specifically after, you may want to add:
html,body{
padding:0;
margin:0;
}
Then wrap everything after the modal--mobile-splashpage part within another element and hide this when the splash is being shown. You can then toggle the two (splash and content) as you see fit. See demo here
html,body{
overflow:hidden;
}
And when you hide splash screen just use jquery to get back scroll
$('html,body').css('overflow','auto');
Try this one:
body {
overflow-y: scroll;
position: fixed;
width: 100%;
}
I've created a website with a content-width of 800px.
However, when my user uploads a picture with a width of 900px, the site is totally out of order.
Is there a way to add a slider or scrollbar instead of the div getting bigger, when the images are too large for the website? If not, I think I have to resize the uploaded images..
Thanks in advance.
put style="overflow:auto;" on your div then it will produce a scroll bar when image is larger than your space
I assume that because you're talking about width, that you're wanting the content width to maintain at 800px and then default to scroll if content (in this case an image) is > 800px.
Perhaps you could take advantage of the overflow-x: scroll; property in CSS to only scroll horizontally. overflow: auto; may add the vertical scroll as well when not required.
You may need to supply a little bit of the code that you are using so we can figure out the problem, but what you could use is:
overflow: hidden;
That will stop anything being wider than your 800px content container.
I have a div that has a lot of content and hence scrolls.. How can I hide the scrollbar such that it is not visible. EDIT: I do want scrolling to work! So.. Scrolling with no scrollbar?
eg
.scrolling_div {
overflow:auto;
/*something else to hide the scrollbar?*/
}
Ok, I spent sometime to write minimal code.
Check DEMO. Mouse over the div and scroll to see the scroller.
Note that this using an external plugin to listen to mousewheel event.
DEMO page for the plugin
overflow:hidden should hide the scrollbar.
.scrolling_div {
overflow: hidden;
}
overflow can take any one of the below values,
visible
Default value. Content is not clipped, it may be rendered outside the content box.
hidden
The content is clipped and no scrollbars are provided.
scroll
The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment.Printers may print overflowing content.
auto
Provide scrollbars if content overflows.
Reference
overflow: auto; means "show a scrollbar if necessary". Change it to overflow: hidden; to disable scrolling.
EDIT: Okay, you want to make a custom scrollbar. Then see this sample jsFiddle for how to get started - it includes mouse wheeling and dragging of the scrollbar.
You can try this:
html {
overflow: hidden;
}
it will remove the scrollbar from all the window.
Otherwise if you need it only on a specific div:
.scrolling_div {
overflow: hidden;
}
Use a wrapper which covers the element you want to be scrollable without a scrollbar, and let the wrapper be narrower than the element to scroll, in the horizontal basis. This is what I mean: http://jsfiddle.net/FlagelloDiDio/EdgTt/
It really depends on what you are going for. see here
overflow:hidden; may be what you want.
If you want to dip into css3, you can play with overflow-x and overflow-y for even more options.
The only way to hide the scrollbar is to make the content non-scrollable and just cut off if it exceeds the height (overflow: hidden). Honestly, why would you want to have a page that is scrollable that doesn't have a scrollbar? That would confuse the heck out of any visitors. There's no way you can do this with CSS.
As far as customizing the scrollbar, there are JavaScripts out there to do that. But make sure that if the user has it disabled, they can still properly scroll the page without it.
My page layout looks something like this:
<style type="text/css">
#content-wrap
{
margin: 0 auto;
width: 800px;
}
</style>
<div id="content-wrap">
</div>
You'll notice that the content-wrap div shifts its position a tad bit when the vertical scrollbar appears. One scenario is when the browser starts to progressively render the page without displaying the vertical scrollbar, then determines that a scrollbar is needed because the content is taller than the "fold". This shifts the div about 10px towards left.
What is the best way to tackle this problem without forcing the browser to always display the scrollbar?
I'm afraid the best way to solve this is to force the scroll bar to be visible at all times with html {overflow-y: scroll;}. The problem you have is that the "available area" shrinks with say 10 px when the scroll bar appear. This cause the calculated margin on your left side to shrink with half the width of the scroll bar, thus shifting the centered content somewhat to the left.
A possible solution might be to calculate the margin with JavaScript instead of using margin: 0 auto; and somehow compensate for the "lost" pixels when the scroll bar appear, but I'm afraid it will be messy and the content will probably move a little bit anyway while you calculate and apply the new margin.
If your site is "responsive" (reacts to width):
Step 1: Add width: 100vw to a wrapper element. This makes it as wide as the viewport, ignoring the appearance of a scrollbar.
Step 2: Add overflow-x: hidden to the content element. This will remove the horizontal scrollbar (created when vertical scrollbar appears, to allow the user to "look under" it).
"wrapper element" is in our case referring to another div around your #content-wrap
Will work for your case too, tested:
<style type="text/css">
body {
overflow-x: hidden;
}
#wrap-wrap {
width: 100vw;
}
#content-wrap
{
margin: 0 auto;
width: 800px;
}
</style>
<div id="wrap-wrap">
<div id="content-wrap">
</div>
</div>
Make sure nothing useful on your page is wide enough to get caught under the scrollbar.
For example, you can ensure that the sum of (horizontal padding + border + horizontal margin) of the content element is wider than the scrollbar).
If your site is fixed width + centered (your case):
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
This will add a left margin equal in width to the scrollbar when it appears. Which is 0 when it does not. Taken from here, but tested.
You must use:
html {
overflow-y: overlay;
}
Only supported by WebKit (Safari) or Blink (Chrome, Opera)
Use jquery and put this in the start of your tag:
<script type="text/javascript">
function checkheight(){
if ($(document).height() > $(window).height()) {
//that is if there is vertical scrollbar
document.getElementById('yourcenteredcontainer').style.paddingLeft='8px';
//8px because the scrollbars are (?always?) 16px
}else{
document.getElementById('yourcenteredcontainer').style.paddingLeft='0px';
}
}
</script>
and call the function checkheight(); in the end of your tag plus wherever you have onclick (or other) events that make the page longer or shorter in height.
If you can use Javascript, you can set the width of the content-wrap to the inner width of the window minus the standard width of a scrollbar.
You will run into some problems though.
The user will have to have Javascript enabled
You don't know what the width of the vertical scrollbar is, especially if the scrollbar isn't there! So you will have to guess. 20px seems like a good guess.
Different browsers have different ways of telling you want the inner width of the window is.
So if you can live with all that, you can do something like this (in pseudo code)
if window.innerWidth is defined :
set the width of the div to window.innerWidth-20px
else if we're running on Internet Explorer :
set the width to document.documentElement.offsetWidth-20px
otherwise :
we're out of luck and we best leave the width as is.
First I would recommend optimizing the HTML so that it won't take so long to load/render. If load/render is fast the scrollbar won't appear "too late". What is it that takes long to load/render? Check the network tab in chrome debug tools (F12). Do an audit in Chrome debug tools.
There are multiple things that could make the document "reflow", and the scrollbar appear even though the browser could have known the necessary measurements right from the start. Are you using tables for layout - don't! They may need multiple passes of rendering. Do you have images without width/height specified? Then the document will need to be rerendered when each image loads. Specify <img ... style="width: ..px; height: ..px">. Is the CSS sane and efficient?
If you can't get load/rendering speed down I think your best bet is to not use the browser's scrollbar if javascript is enabled. That way you can control it and place it absolutely positioned so that it won't affect horizontal positioning.
Let your slider start of with display: none. Monitor dom ready event as well as image load events as well as window resize events. When the page has been loaded, images have been loaded and when window gets resized just run the same function every time. It would determine if the scrollbar is needed and either display it or hide it.
You could use JQuery UI Slider for example and set it's maxValue to $(document).height() - $(window).height(), monitor the slider change event and then scroll the body to the value of the slider and so forth.
If javascript is disabled the fallback will be the regular scrollbar and there's nothing you can do about the slight horizontal shift then.
But really I think the problem of the horizontal shift is too small to spend time fixing with a custom scrollbar, and check that it actually works well on all platforms etc. Do HTML/CSS optimizations first.
You can try this solution: https://stackoverflow.com/a/67213174/14302216
But the widths can't be relative. Probably, width:100vw will work for the parent, but I'm not sure how you would set the child width. I'm afraid calc(100vw-16px) will not work. But if you can set like widht:800px for the child, it will be fine!