3 ms·

I've seen this a number of times, though I can't remember a recent example. One site attempted to do it more intelligently, and the footer floated via z-index

I've seen this a number of times, though I can't remember a recent example. One site attempted to do it more intelligently, and the footer floated via z-index and pinned to the bottom of the window such that it was always visible despite the infinite scroll. Though they got it a little wrong and didn't account for the footer height in scroll calculations so if the content wasn't infinite so you could get to the end of the scroll, the last couple of lines were obscured by the footer. There must be quite a few ways to do this “properly” and smoothly (just thought of a couple right now, and I'm no front-end guy), assuming you consider automatic infinite scroll to ever be considered doing design “properly”.

mattnewton 4y ago
It’s not a hard problem to notice or fix, probably just comes from people not using their site a lot. All you need to do is insert your content in a fib before a final “filler” div that has the same height as the floating footer. If your floating footer doesn’t have a fixed height (and there is some really good reason for that) a further hack is to measure it and then set the height of the filler div in js.
- ushakov 4y ago
  or just display the scrollable content in a container with overflow: scroll you can then make the container fill the height/width with flexbox
  - mattnewton 4y ago
    Also works well, but that might introduce janky behavior with iOS safari’s title bar and tapping the top to scroll to top in my experience. I don’t know if this has been fixed, it’s been a while since I wore a CSS hat, but I vaguely remember fighting with mobile safari and overflow divs a lot.
    - ushakov 4y ago
      ah, yes in that case you can just add position: sticky and bottom: 0 to the footer with this trick you get the same behavior as with position: fixed but won’t need a wrapper div as in the comment i replied to
      - mattnewton 4y ago
        Yeah position sticky is definitely part of what you want, telling the browser declaratively what you are trying to accomplish.

mattnewton 4y ago

It’s not a hard problem to notice or fix, probably just comes from people not using their site a lot. All you need to do is insert your content in a fib before a final “filler” div that has the same height as the floating footer. If your floating footer doesn’t have a fixed height (and there is some really good reason for that) a further hack is to measure it and then set the height of the filler div in js.

ushakov 4y ago
or just display the scrollable content in a container with overflow: scroll you can then make the container fill the height/width with flexbox
- mattnewton 4y ago
  Also works well, but that might introduce janky behavior with iOS safari’s title bar and tapping the top to scroll to top in my experience. I don’t know if this has been fixed, it’s been a while since I wore a CSS hat, but I vaguely remember fighting with mobile safari and overflow divs a lot.
  - ushakov 4y ago
    ah, yes in that case you can just add position: sticky and bottom: 0 to the footer with this trick you get the same behavior as with position: fixed but won’t need a wrapper div as in the comment i replied to
    - mattnewton 4y ago
      Yeah position sticky is definitely part of what you want, telling the browser declaratively what you are trying to accomplish.