Putting content outside the element using CSS (pull to refresh-style)
On mobile a common UI element is to a have “Pull to refresh” control above a scrollable list. This area then contains last updated information or similar.
However, if you try to do this naively in HTML, by positioning an element outside the <body>
using position
or negative margins, you’ll find the element will not render. This is true
for all browsers.
But: You can work around this using the transform
property. By specifying a translate
value, this will move the element outside the body while keeping it visible. The markup
is relatively simple:
You can try this effect on this page scroll to the top and keep scrolling up (on OSX, Android or iOS) and you will see the element. It will only work on OSX with a trackpad, not using a mouse wheel.
This is a very simple trick that I did not find documented anywhere, delight your users and put something fun for them to discover up top! :)