Im working on a Website and everything is ok, except my webside is "shaking". (I'm using chrome)
The margin of my main Container is changing on some sides and i have no idea why. They have the same html code, it must have something to do with the content in the main div-container
My Website: www.anitalernt.de
http://www.anitalernt.de/about-us.html is a bit more to the left and http://www.anitalernt.de/index.html after getting a task (just click some buttons) also.
Has someone a idea?
Always display the scrollbar
html {
overflow-y: scroll;
}
See:
Always show browser scrollbar to prevent page jumping
How to always show the vertical scrollbar in a browser?
You could add
html{ overflow-y: scroll;}
to your css.
Places a permanent (but sometimes empty) scroll bar on the window
The issue is most likely caused by the scrollbar appearing, which reduces the viewable area of the browser window and may adjust the contents accordingly.
There are a couple possible workarounds:
You could extend the length of the adjusted web-page so that the content (post-adjustment) also runs "below the fold"
Alternatively, you could encase everything in an absolute positioned DIV which won't "shake" when the viewable area contracts on the scrollbar's appearance.
Or -- depending on your specific content -- you could disable the scrollbar. Although this last workaround is only advisable in very specific cases.
body{
margin: 0;
}
seems to resolve this without having to add a dummy scrollbar :)
I had the same problem because of jQuery scroll where I was checking the scroll value and using that. I fixed my navigation bar by using addClass and removeClass, adding class was not working because I did not use !important in CSS class.
Related
There was a similar question asked on here (not enough information was given) so no real solution was presented. I am using MixItUp to filter content within a framework (Foundation) based on a button being clicked. I noticed a weird movement that happens when a button is clicked. I have uploaded the files to be viewed here
http://cantaloupecreative.info/filter-code-snippet/
After the animation fires, I see page elements jump to the right a bit. If that's what you're referring to, take a look at the scroll bar. When there aren't enough elements on the page, the scroll bar disappears and everything re-centers, which is likely what you're seeing. You can avoid this by permanently enabling or disabling the scroll bar with CSS
overflow-y: scroll;
or something similar.
Okay here is what I uncovered in my search for a solution. WebKit is overriding the css change I am making to my body class. You cannot use overflow-y in chrome because of this. Now when I was making the change to my sass file it wasn't compiling correctly. After hardcoding the webkit fix into my stylesheet I was able to remove the scrollbar on all toggled divs with the following code.
::-webkit-scrollbar {
display:none
}
Obviously this only fixes half of the problem because now I am without a scrollbar. But it atleasts fixes the hoping issue.
I have been fighting with this thing for several weeks now. I just can't figure it out.
I'm trying to prevent horizontal scrolling of the body when the menu is open. Here is a complete jsbin:
http://jsbin.com/vopeq/38/edit
Seems like any solution only undoes other things that are working the way I would like them to. So I added the requirements to the jsbin to keep track of which are satisfied with each version.
UPDATE
Maybe it's too good to be true, but I think I have all requirements satisfied, but I still need to check on android devices:
http://jsbin.com/vopeq/61
The thing I learned, that was tripping me up for so long and I didn't realize it, is that overflow: hidden on the <body> element, in Mobile Safari, doesn't do squat! I had to move my styles to prevent scrolling down one level of elements.
And Ed4 pointed me in the right direction. I needed to set overflow: hidden on the parent of the element I'm moving with left: 85% instead of the element itself (I was trying to do it all on the <body>).
So I have a body > .container, on which I do the overflow: hidden and body > .container > .content, which I push over using position: relative and left: 85%.
Your question is more of a design spec than a question, so rather than try to design the whole layout for you, I'll point out why your jsbin doesn't work.
Don't try to set left on body. If body is protruding offscreen, you're not going to be able to reliably stop scrolling.
Instead, keep body stationary with 100% width and height, so it can serve as your visible window boundary. When you want to lock the scrolling, you can set overflow: hidden on body. Handle the slide-over and scrolling menu with separate divs inside body.
All I am trying to do is have a scroll bar that allows me to navigate to the left on a SharePoint site. I tried a couple examples that I found online using CSS and javascript, but It seems i don't know enough to make it with just one scroll and to make it appear on say -120pixels. Any help is greatly appreciated.
When I reach the edge the scroll appears.
Thank You for reading.
You need to add your code and/or a working example. Otherwise, it's tough to determine the source of your problem.
You can always force a scroll bar via the CSS overflow definition.
overflow: scroll;
The MDN overflow page provides a good explanation and demo of each option. It's states the following for scroll:
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.
You can specify the direction if necessary, though the MDN page warns of possible compatibility issues. I'm unaware of any issues.
overflow-x: scroll;
overflow-y: scroll;
This sounds as though an issue with float, overflow and the s4-workspace primary container div. Very difficult to explain further though without more code and larger screenshots. Or a screenshot with Firebug loaded so that we can see what containers exist and what css is appied to them.
I'm designing a website and I have multiple pages that use the same template, some pages are longer than the browser window's height, other's aren't. The ones that are longer get pushed to he left by about 10px, this might no sound like much but it's noticeable when switching pages as everything jumps sideways.
Is there some CSS thing I can do to make the scroll bar on each page appear over the content rather than pushing it, I have a margin in the template so if the browser window is too small it will just cover the margin when the user scrolls to the far right.
The only way to do this is to have the scrollbar always visible.
html { overflow-y: scroll; }
Give overflow value as overlay. This will avoid the recalculation of layout when scrollbar appears
Overflow: overlay worked for me. Would've commented on jintoppy's post but I'm a nooob
I am trying to use jQuery to handle the scroling, so I want to get rid of the browser's scroll bar... how do I do that?
well with css you could do that -> overflow:hidden on the body tag but you will not be able to scroll down anymore if the page is larger then the browser screen (unless you use your keyboard arrows)
Use CSS: overflow:hidden; will disable the scroll-bars of the element.
Not certain whether it will work on the whole page (ie at the body level), but you can always wrap your content in a div and style that.
The way to prevent the browser scroll bar using jQuery is to keep your document height less than your window height. Meaning you would need a wrapping div and make sure your content never exceeds the window height.
$(document).height();
$(window).height();
Not sure what you are trying to accomplish though.
as others have suggested you can use the CSS property
body{
overflow: hidden;
}
The actual use case would need to be presented to find which way would be best.
For finer control over which scrollbar to show and hide you can also use overflow-x and overflow-y. Browser support is a bit tricky. You can check it with this testcase if there is a solution for only get rid of the vertical scrollbar in your case.