I am looking for a CSS solution to implement the exact behavior of "overscroll-behavior: contain" but for when the target element has no overflow.
I have a page with a pop-in sidebar/menu that, on mobile, takes up 100vw and 100vh (minus bottom navigation bar) and does not overflow (there is not enough content to need scrollbars). Currently when this sidebar is open on mobile, if the user tries to scroll it, the main page in the background scrolls, which in this app can result in unwanted database calls due to lazy loading/infinite scroll.
Here is a minimal codesandbox demo:
On line 55 of demo.js I have added the overscrollBehavior: "contain" property to the JSS, but as you can see, it does not contain the scroll chain, unless you shrink the vertical height of the browser to force the content of the sidebar to overflow first. (On Chrome the overscrollBehavior seemed to have the expected behavior in the codesandbox editor, but not when popped out in its own window.)
Surely there is a CSS solution to get this behaviour without the element having to be scrollbable first?
Interestingly, on Firefox at least, if you shrink the vertical height to force scroll on the side bar, once you resize the browser back to normal, the overscroll-behavior property continues containing the scroll chain until you refresh the page, which is the behaviour I'm looking for, though obviously on initial page load.
Here is a simple codepen showing the difference in overscroll-behavior for elements which do and do not overflow, if it's not already clear. I also found another post on the CSS Tricks forum from 2018 of someone asking about this behaviour, but with no solution.
Related
Building a new website using Wordpress 4.2.3 with Tesseract 1.0 theme, ran into a problem that only 1/3 of the Footer is visible immediately, seeing the rest requires scrolling down.
This happens even on a page that is almost empty and the browser window maximised, screen resolution 1920x1080.
Same problem with Firefox and Chrome. I would expect to see the whole footer without any scrolling.
Any hints appreciated!
One of two routes I would go:
1) Check the jQuery script running on page load may be finding .height() of your footer instead of .outerHeight()?; the later would calculate height including padding and margin. The former would not.
2) Without tinkering with the script, take off the 40px top/bottom padding on your footer and instead use a wrapper element inside your footer for placing the content. Give the padding to that wrapper instead. This should alleviate any issues with calculating sizes of elements in your script.
I'm building a site layout ( should be cross-browser ie7,8,9 and all the recent ones ) and everything was great until i tried to zoom in. When the scrollbars appear, the header's floated elements move out of its container ( so it seems ).
Currently the behaviour persists on every browser, and also the page is using a sticky footer so i can't really modify the main structure i guess.
Here is the page:
http://www.mindsinfusion.com/k/
Any ideas on how to fix this? Am i doing something terribly wrong ?
Thanks
Your #pageHeader & footer DIV's are defined for 100% width, which applies to the window. when you zoom, you're window effectively is getting smaller.
I tried adding a min-width: 1030px; to your css and it worked, in chrome & firefox, but it may not be fully cross-browser solution.
I'm building an app for a Facebook page. It works well on all browsers other than IE.
It has two issues. Firstly, the positioning is all off. In the other browsers, the 'genre', 'artist' and 'details' divs are all level straight under the header image. In IE the 'details' div is raised by about 20 pixels.
Secondly, the main div (the ones demarked by day, #friday, #saturday, #sunday) won't scroll all the way to the bottom. It stops about 120 pixels before it should. Very strange indeed.
I've attached the code, but unfortunately it renders differently in the app when compared to on the page (in regard to the positioning of elements). Again, I'm unsure as to why this is.
I'm a real beginner, so I'm sorry if some of these questions are unclear or, just as bad, blindingly obvious!
Here's the code: https://gist.github.com/5ea583adcbc4eef7558b
I assume you are looking at your tab in 'preview mode', and suspect that the bar Facebook sticks at the top of your tab (the one saying "Preview Mode is On. Only admins can see the content of this tab.") is screwing up your position: absolute layout.
I suggest you rearrange your code so that the #fridaylistings, #saturdaylistings and #sundaylistings div are inside their respective #friday, #saturday and #sunday divs.
Then set position: relative on the #friday etc divs. This will allow you to control the position of each one's children relative to itself rather than the whole page. See here for an explanation of this:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I run a site using a liquid tri-column layout with a header. The layout runs nicely for more than a decade with all browsers I ever dared to try. It is based on absolute positioning in CSS. This page provides an example of the actual site.
Watching the page from my tablet I found that the right column overlaps the center matter. Further investigation using Firebug showed that once the center content reaches 360px width, the right margin of the div shrinks. Why is that? Since Firefox and Android render the same, I guess that this is something, which is actually supposed to be.
However, I tried to make virtue out of necessity and experimented setting min-width for body and content and made the body scroll overflow. The body actually scrolls, but the right column is positioned on the right edge of the viewport instead of the body element (Firefox). Is this intentional CSS standard?
Any ideas how to solve the presentation on small displays?
Thanks for your efforts,
– lars.
I pondered a while whether I should revoke the question or provide this self-answer. I decided for the self-answer since I wished some of the answers in related had been presented when I wrote the question.
First the 360px limit apparently is my own stupidity. There is a comment form, which refuses to shrink. It scrolled out of my view.
The issue of the wiered positioning had been solved by adding position:relative; to the body. The reason is explained in this question.
The overflow setting I used during experimenting is not necessary, since the default behaviour scrolls already. But using any overflow directive wrecks IE8.
So thanks a lot, the pool of answers finally had it all.
I am seeking help with trying to fix my background image fill issue. I wanted to have a sticky footer, which I finally figured out, but now if I view my site in a smaller window and then scroll down, my background image disappears. I understand that this is due to my height settings being 100% which makes my image be based off of the initial viewport size, but I can't quite seem to implement any kind of fix.
Here is the site I am working on (still very much under development): http://student.plattsburgh.edu/stipl001/index.html.
The problem is best viewed when looking at this page in a small window: http://student.plattsburgh.edu/stipl001/resume.html.
I have read many, many posts on various sites trying to figure it out (including this one: CSS: background image does not fill when scrolling), but I am not having any luck. I tried setting all the different properties for background in css that I could think of, including some of the newer ones. Then I experimented with the overflow property, but it just hides all of my text or creates a weird scroll-bar that makes my text scroll up over the header. I also tried moving my page background from body to html and my container background from container to body, but it didn't change anything, so I must be doing something wrong (perhaps the fact that I have the two background images to deal with?).
I'm just a coding newbie and have been teaching myself as I go along, so I would really appreciate specific suggestions on what method of fixing this would be best for my site, and how I can go about implementing it. After spending about 10 hours straight on this one problem, I am at my wits' end.
Thank you so much!
just change min-height:100% to min-height:1092px (the height of the image) and you'll be fine...
EDIT:
previous answer was a bit too quick, after having a second look on the code i noticed the error is caused by the floated columns: if you float an element, the container element will not inherit the height of the floated element - that's why the height was set to 100% of the initial window, and was not expanded if the content column got longer.
This can be fixed by adding an extra element in #container, after #rightcolumn, with clear:both on it - this will force the parent element to take over the height of its contents.
See http://jsfiddle.net/uS7Ba/1/ for a simplified example, including improved fixed footer.
Hope it helps...