You may have heard of scroll bouncing under a few different names; rubber banding and elastic scrolling are just a few other terms we hear a lot. Scroll bouncing itself is often used to refer to the effect you see when you scroll back to the top, or down to the bottom of any page or HTML element, on a device using a touchscreen or trackpad - which nowadays is pretty much all of us.
When you scroll to the top or bottom, you will see an empty space for a moment before the element or page springs back and aligns itself to its correct position – usually when you release your fingers: this is you reaching the scroll boundary.
Having a good understanding of scroll bouncing will help you when you come to design your website and how you want the page to scroll for the user.
If you want to see fixed elements on the screen, then scroll bouncing isn’t for you. If you like a header and footer to remain in a fixed position, likewise with elements such as a menu, or if you want the page to scroll-snap at certain positions without further scrolling to occur that could confuse visitors then scroll bouncing should be avoided.
How do you solve the problem of scroll bouncing?
By using absolute and relative positioning to position the footer and setting the web page to 100% height you can secure your footer to always be at the bottom of the page with affixed height. Alternately you can set up a padding-bottom so that the contents of the application do not overlap with the footer.
Scroll bouncing will seriously affect the way n which potential clients interact with your website. For more information on website design in Manchester, contact VisionSharp today.