Will CSS position:fixed block event handling? - javascript

Show you code first:
https://codesandbox.io/s/vigorous-fog-te1bw?file=/index.html
Please focus on two points:
full-size-bg is full screen background, it use a fixed div to adjust the alpha instead of set background to parent node because I do not want to modify the real image alpha.
scroll-area is above the full-size-bg and it`s(should be) a scrollable area which height is longer than visible area
Then what I want to know is the fixed background will block the event handling if I do not add position: absolute in scroll-area, the scroll area can not scroll with mouse wheel(but it can scroll if use up and down arrow key, Why?). Of course fiexed will leave document flow for layouting, but also for event handling?
Second, Chrome do not need add the z-index line, but Firefox need, Why??
Third, What I need now is a standard way to set a full screen background with alpha programmatically?
Thanks a lot.

Basically, in your example code, the fixed position does not prevent scrolling. The problem is, when you don't set position: absolute for scroll-area div, the full-size-bg div is HIGHER z-index. You can see that by inspecting in developer tool by right clicking, it will show the top "front" element.
You can find an answer here also: z-index not working with fixed positioning.
For question about firefox vs chrome z-index, you can see more here: z-index behaviour is different in chrome to firefox
For third question, I don't understand correctly :(

Related

How to get rid of scrollbar popping the page position?

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; }

-webkit-overflow-scrolling breaks absolute positioning

I am building a page that needs to have some elements which stick to the top of the page when they would otherwise be scrolled off the screen. I managed to do this using position:absolute. Everything was working perfectly, but it needed momentum scrolling. I added -webkit-overflow-scrolling: touch to the css of the scrollable area. This broke everything. My sticky elements with position:absolute are now just scrolling with the rest of the content.
My question is this:
Why does -webkit-overflow-scrolling: touch affect absolute positioning, and is there a way around this?
UPDATE: I added an alert whenever a child element becomes "fixed" or "unfixed". The alerts continue to fire, so the styling is still being applied, it just isn't working. This means that it's not a problem with keeping track of scroll position but rather a problem with the styling.
UPDATE: I tried using position: fixed instead of position: absolute and -webkit-overflow-scrolling broke that too
UPDATE: After a lot of digging, I found references to this problem here and here. However, the only proposed solution in both cases is to restructure the DOM so that the sticky elements are not in the scrollable area. This is a difficult thing to do in my case, and I would prefer not to have to. Have things progressed since ios5 or is that still the only option?
On the last question - yes the issue is present in ios5. Extracting the absolute positioning element outside of the scrollable area worked fine for me.

html margin issue - "Shaking" Website

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.

Most minimal solution to enlarge child so as to create scrollable space

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.

Is it possible to auto-margin elements with scrollbar and without it to same position using css/js?

I drew the problem so you can better understand it:
So, the question - is it possible to get the same position for both blue elements?
I can't just add "padding-right" - in different OS/Browsers scrollbars can have different widths...
Is it possible to do with css?
If not, is there a JavaScript solution to get the scrollbar element's width and center blue elements manually?
You could add a invisible wrapper around the blue box that takes up all the space in the parent minus the width of the scroll bar. That would make the blue box the same size as in Container 2 all the time.
Just make the scrollbar always visible instead of trying to come up with a clever solution. Depending on your content/app the scrollbar is propably always visible 95% of the time (at least if was like this whenever I ran into such a problem).

Categories