If I scroll at the top and then if I want to scroll down sometimes I see the white background, I've set the margin to 0 but I have seen web pages that do not have this kind of behaviour, any suggestion?
One way is to set body background color the same as your header or use this code to prevent over-scrolling.
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
Related
I want to disable scrolling for when there's a popup, but I hate how the entire page changes size when you add/remove the scrollbar. Is there a way to disable scrolling without hiding the scrollbar?
Kind of like when you set overflow:scroll to an element that doesn't have enough content to scroll: it still shows the scrollbar but it's disabled.
//when popup is open, disable scroll on body
body.popupOpen {
overflow: hidden;
}
Make sure that the overflow (the scroll bar) is on the body element then add an overlay that will simply cover the body and its scroll bar when the popup is shown.
Here is a simplified example with only the overlay where you cannot scroll:
body {
overflow: auto;
margin: 0;
max-height: 100vh; /* no more than the height of the viewport*/
}
html {
overflow: hidden; /* This one is important to avoid the propagation */
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
}
.content {
min-height: 500vh;
}
<div class="overlay">
</div>
<div class="content">
</div>
The answer is no, but you can set 'hidden' and create a element to simulate the scrollbar, but why would you do this, it only makes the user confused.
You can create a div that fullfils the whole page view, and just make it transparent, this way you can just enable/disable the div scroll to mantain a scrollbar:
.theDivInactive {
background: none;
pointer_events: none;
width: 100vw;
height: 100vh;
overflow: hidden;
}
and switch the class when the popup is on the screen:
.theDivActive {
background: none;
pointer_events: none;
width: 100vw;
height: 100vh;
overflow: scroll;
}
`
I have fixed the issue the same way bootstrap does. Just in case other methods doesn't work for you, here's the JS trick to calculate scrollbar width for a given browser. Then on modal open, you can set the padding-right to body element:
const documentWidth = document.documentElement.clientWidth;
const scrollbarWidth = Math.abs(window.innerWidth - documentWidth);
document.body.style.paddingRight = `${scrollbarWidth}px`;
Note: this will only work well if you set overflow-y: scroll to popup bg or put the popup over the white strap that was created as the side effect of the padding-right property.
Note 2: If elements are positioned absolutely relative to body width, they will still "jump" so you need to add padding to them as well or wrap them with div that has position: relative
So I have a problem with empty space at bottom of the website. Here is website: click
Repo of website: https://github.com/bdevelops/feditor
I read questions on stack, tried to find solution, but nothing works.
Sorry for bad English, if it is.
In your CSS class .box is margin-top:30px or height:100%. This is what makes white space at the bottom of your website
box {
background: #fff none repeat scroll 0 0;
box-sizing: border-box;
height: 100%; **//Set it to "auto"
margin-top: 30px; **//or this one, change it to 0px or remove**
overflow: hidden;
width: 100%;
}
I have a website http://www.thecarnivalmidway.com/index.htm 200 pages and I have 1 that wont scroll, it use too. I've tried to figure it out and cant. so I am lost now, here is the link for the page that wont scroll http://www.thecarnivalmidway.com/site2/carnival_northeast.htm
Please help!
Firebug tells me that on that page on line 105 you have a css instruction that says: overflow: hidden.
This means that what is not fitting the screen size is hidden.
Remove that line and you are done.
It's a CSS problem. This is the CSS applied to the body tag:
body {
height: 100%;
width: 100%;
overflow: hidden;
}
The overflow: hidden; should be removed:
body {
height: 100%;
width: 100%;
}
My website works on a 15 inch laptop, but whenever I resize the browser, some of the information on my website 'disappears', as I am unable to scroll (scrollbar won't appear).
I'm experiencing this problem for two of my websites (they're part of a school project).
On the first website, the sticky footer covers the content when the website is being viewed in a smaller browser window. I managed to get a scrollbar for the container part (everything except for the header and footer), but I need the scrollbar to appear on the very right side of the website, outside of the container. (only the footer will be fixed, the header will be scroll-able as well).
http://sophisticateddesign.nl/cfreport/index.html
On the second website, I need the header and butterfly to stay fixed and for everything else to be scroll-able.
http://sophisticateddesign.nl
I'm wondering if there's an easy solution as I don't have much time left for these websites to finish..
Remove overflow: hidden in html
html {
height: 100%;
margin: auto;
width: 960px;
}
Remove position: absolute for .Wrapper
For second site:
You added your main content inside header with position: fixed; height: 50px;. It's the problem.
Yeah I just tried this out if you need something to overflow the sides you should use
html{
overflow-x: hidden;
}
instead of using just overflow.
|| For anyone who encounters this problem in the future. ||
You have these CSS properties to your HTML tag.
html{
height: 100%;
margin: auto;
width: 960px;
overflow: hidden;
}
Try changing overflow to overflow: scroll
You have these CSS properties to your HTML tag.
html{
height: 100%;
margin: auto;
width: 960px;
overflow: hidden;
}
I have very simple html page with looong (~8000px width) horizontal panorama image.
The image is set in css as a background background-image:url('long_jpg.jpg');.
I need just to have a scrollbar at the bottom of the page to be able just to scroll the whole background image.
How can do that with css? Can you please give any working example?
check this working example http://jsfiddle.net/a9QvT/1/
.panorama
{
width: 1280px;
height: 1024px;
background-image: url(http://www.designmyprofile.com/images/graphics/backgrounds/background0188.jpg);
}
One way is to set the body width to the same width as the image
body {
width:8000px;
}
If you have any other content, you want to encapsulate all that in a div, so that the content doesn't shatter across 8000px as well.
Is there any reason you can't do this?
HTML:
<body>
<img src="picture.jpg" class="bgpic" />
</body>
CSS:
body
{
margin: 0;
padding: 0;
width: 8000px;
height: 100%;
}
.bgpic
{
width: 100%;
height: 100%;
}
Just like this...
body {
margin: 0px; padding: 0px;
background-image: url('long_jpg.jpg');
min-width: 8000px;
height: 100%;
}
but a quick warning, in terms of design and layout, people are used to pages which scroll up and down, asking them to scroll side to side will seem pretty annoting to most people. Unless you use some anchor tags and they can just click their way to specific points on the page without having the drag the scroll bar.