0
208
ViewsIs it possible to add a background image to the scroll-bounce area in html?
Most browsers support scroll-bouncing on websites so that when you scroll to the top or bottom of a website it "bounces", instead of abruptly stopping.
Normally the extra area exposed when the page "bounces" is plain white, but you can apply a background-color element to the <html> tag, and this extra area will take on that color(You can see this described, and in action here: Example Site)
Here you can see the scroll-bouncing with a custom color, instead of the white:
The effect I want to achieve is that when the page bounces, the scroll-bounce area has a background-image, instead of just plain color. I think this effect could look nice with some simple icons tiled with the branding of the site. I remember seeing this effect a few years ago on css-tricks.com, but I don't know how the effect was achieved, or if the way it was done has since been deprecated.
From what I understand, it's not possible to add a background-image property to the <html> tag, but is this possible through a work-around? Perhaps cancelling out scroll-bounce behavior with the overscroll-behavior property, and creating a similar looking effect with javascript when you scroll above or below the edges of the page?
1 answers
Answer question0
Not sure if this will work (as i haven't tried it), but you can take an image element with position: absolute/fixed (absolute or fixed depending on where your img tag is placed) and set - bottom: <height of the image> and left: 0. This way the image technically exists above the viewport and will only by visible if you tried to scroll past the navbar which will cause the bounce effect.