I have a page with tabs that can display various height content, some of which require a scrollbar and some that don't. The visual effect of changing between these contents is kinda annoying though since when the window scrollbar pops into existence, it shifts the whole page left by just a little.
Things I've tried/considered:
always having scrollbar visible - it works but I don't like it.
setting the body width to 98% - apparently thats still 98% of the window which gets resized so still popping. Setting it to a pixel value works but people have different size screens.
compensating the window width loss with a script - was a fairly simple script but funny enough, the window resize triggered by scrollbar appearing doesn't trigger the resize event of the window and I havent found any other suitable event to attach it to.
Does anybody know a good technique for keeping the page container in place?
I guess you could add a class with margin/padding to the body and then remove it with jQuery. The downside of doing this is that different browsers have different width of the scrollbar and for instance safari on mac don't even have a visible scrollbar. So recommendation would be to just have the scrollbar visible all the time.
The correct answer is
html { width: 100vw; }
Related
I got a website (which I didn't made) that, when I resize to test responsiveness, it works normally, though, when getting it back and scrolling down (and then up), there seems to appear a gap between the header and the element under it.
Site: http://miriam.mx/index/
Before resize and scroll:
After resize and scroll:
The site is using a lot of plugins and css:
The thing is that I need some hint to solve it, since I'm not experienced with any of those CSS works yet.
This has to do with your sticky code. Looks like you are using Sticky-Kit. It's setting the height of the sticky div to a height bigger than your children elements. You are using 1.1.1, which they have 1.1.2 and that seems to add some support with auto adjusting when scrolling. You could also play around with the recalc settings.
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.
Okay this is a rather complicated setup/question so I will try to explain it as clear as possible. Right now stellar parallax is working great on my site with no issues whatsoever. this was accomplished by setting the responsive property in stellar.js to true which makes it so that the background image follows the div when you resize the window. Because the issue before was that resizing the window was bad because stellar vertically aligns the background images in a certain way so if you resized the window the div in question might end up in an area where the background is repeating or in an empty spot(if you had no repeat on), it just wouldnt be aligned with the background image anymore. Responsiveness=true fixed this.
However here is the new issue. I have a section on my website where 3 divs are set to display: none by default. 3 buttons, respectively, toggle their display. Toggling their display makes their parent div much longer therefore pushing the rest of the content of the page further down. This pushes the stellar divs out of position with their background images again and i can see areas where the image repeats or are blank(if you have no repeat). However if you resize the window after you toggled the three hidden divs, the stellar divs will automatically fix itself and realign the images as a result of it picking up the responsiveness. I was wondering if there was anyway perhaps I could make toggling the hidden divs trigger this realignment without the user having to resize the window(he/she wouldnt know he/she had to anyway)?
Perhaps a way to refresh a specific part of the page(the stellar divs)? Or perhaps a function to resize the window by like a pixel or even 0 pixels just to trigger the responsiveness?
Thanks in advance, I hope everything makes sense.
I'm trying to figure out how this was accomplished:
http://www.paranorman.com/
In this site, the browser window's scrollbar drives the scroll position of a DIV. However, the window has a scrollbar even if it fits entirely into your browser window.
I need to make a site with a container element that will be driven by a scrollbar, even though the site container will be a size that fits in most desktop browser windows without needing to be scrolled.
This is done with trickery, where the body (or some other element) has a large size so as to get a scrollbar, and another element is placed with position fixed and height/width 100% in front of the scrolled element and takes up the entire screen, so the scrolled element is'nt visible. Then it's all about getting the scrollTop/Left values and moving elements inside the front fixed element according to how much the scrollbar is moved, making it look like it's being scrolled, when you're really moving stuff with javascript based on the scrollTop/Left values, and we call it, parallax. It all sounds harder then it really is.
In html if a child div is bigger than the parent div it will create scrollbars on the parent div if you set the appropriate style rules.
However, I want it so that when an attempt to scroll occurs (by hitting the arrow keys, making the appropriate javascript call on the element) the minimum needed expansion in size occurs on the child occurs such that it can scroll to the degree that it would have scrolled anyway if the child was already that big.
To state that again: if the child was 300px width within a parent of 200px width, and I hit right arrow key, and it scrolls 20 pixels to the right, then if the child is 200px in that same scenario, I want it to enlarge in width by 20 pixels and no more if possible, and then scroll 20 pixels to the right.
This is all assuming there is no way to make a sub-element scroll within its parents regardless of whether it's actually larger than its parent. There might well be so I apologise in advance if i haven't done enough research. :)
You probably know that the style overflow: scroll will make scroll bars show up regardless of child size. Do you actually need Javascript to boost the child dimensions, rather than having an extra wrapper div with greater dimensions that would cause the scroll like in this demo? I know Safari already scrolls approximately 20px on arrow key down within selected scroll divs by default, and I would assume other browsers have this functionality as well.
If you do have need for increasing the div size with javascript, jQuery has a few functions that would be helpful. The .keydown() method looking for left and right arrow keys (which I believe are key codes 37 and 39 respectively) and the .animate() or some other CSS method would work to resize the div chained together.
The .scroll() method could come in useful as well. You could chain the resize code to the scroll method with an overflow: scroll property already applied. I would test to see if browsers will trigger the .scroll method even if the scroll bars are empty. If not, you could potentially make the child only 1px wider/taller then the parent div and then rely on the jQuery to further resize on the user's scroll.
Broadly speaking, I would advise against the javascript/jQuery resize and scroll. Compatibility with different browsers, especially mobile browsers, would be inconsistent or unusable. I don't know exactly what your needs are, but if it can be accomplished with only HTML/CSS it would be much cleaner and more compatible. I would reserve the javascript for cases where usability will not be lost if it does not run.