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%;
}
Related
I have been building my site on Bootstrap for the first time and I'm having a problem that I can't find a solution of this. When I add some content and if its large and big enough to add a scroll bar in browser, whole page content moves towards left.
In simple words, If there is scrollbar, page content is moving to left like 17px and if not, it works okay. I don't want to add a perm scrollbar here like
overflow-y: scroll;
and if I add
width: 100vw;
It works fine and contents stays at its position even with scrollbar but if there is a vertical scroll bar, horizontal scroll appears too for no reason.
You have couple of solutions:
You can show your scroll permanently and style it accordingly to be a part of your page:
html {
overflow-y: scroll;
}
You can add:
padding-right: 40px;
as 40px is what I have heard is the max scroll size that you can get.
Create a parent div that will have all of your contents, then create a child that is slightly smaller, make it the way that changing parent size will not make child size to change.
You can create JS function that will detect if the scroll is displaying on the page, and it would change the margin settings.
You can use media queries to tackle the problem.
I'm trying to position an image on my website that is wider than the resolution, which creates a horizontal scroll bar every time. I know someone who has a site with an image wider than the screen but his site doesn't cause you to scroll.
Does anyone know a code or a fix to the code that I can add to make the page unscrollable horizontally?
Thanks!
Add overflow-x: hidden to your <html> tag, or set the image as background-image instead, if the image is for design purpose and no content.
body {
overflow-x:hidden;
}
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.
I am using a fixed width layout for a website (1000px), with the layout being centered in the screen by auto margins. However, I find that on some pages on the website, the layout is positioned slightly different than other pages for some reason. This is surprising to me, because I use Django and serve the same base template and stylesheet to each page, so I would expect them to look the same.
For example, take a look at http://crh.vkuzo.com/. If you load the "home" and "suggest" pages, the layout stays exactly the same. However, if you load the "about" page, you can see the layout move slightly to the left.
What is causing this slight movement, and how can I get rid of it?
P.S. here is the relevant CSS for the container div (at least what I think is relevant):
#wholepage {
width:1000px;
clear:left;
margin-top:10px;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}
It is the browser's scroll bar. See: How to prevent scrollbar from repositioning web page?
Add this style:
body {
...
overflow-y: scroll;
}
For centered pages, you want the scroll-bar to be always visible (even when it's not needed). That way the page won't shift horizontally depending on whether the scroll-bar is visible or not.
The scroll bar is adjusting the layout. When the scroll bar appears on the browser window, it minimizes the width by a certain amount of pixels (the width of the scroll bar itself).
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!