A similar effect can be seen for Edge and Safari on iOS. It is currently a challenge to develop scrolling that works in the same way across different web browsers.
#Scrolling effects code
I hope this gives you a better understanding of how the exact same code currently works in different ways. This is different to what happens in scrolling on Firefox and Chrome. To make this article more complete, I’ll show you how the page scrolls on both Mobile Edge, Mobile Safari and Desktop Safari below. This was what worried me when I saw what was happening on Chrome. According to the CSS 2.1 Specification, when a “box” (in this case, the dark blue footer) is fixed, it is “fixed with respect to the viewport and does not move when scrolled.” What this means is that the footer was not supposed to move when you scroll up and down the page. This is also a good time to revisit what position: fixed is. Oh no! This was not what was supposed to happen! I had set the footer's position to be at the bottom of the page by setting its CSS position property to have a value of fixed. You can see what happened here: Scroll bouncing in Chrome on macOS. I was scrolling to the bottom of the page using a trackpad when I discovered that my website was not working correctly. However, at that time, I was using Chrome on a MacBook. It currently works this way in Firefox or on any browser on a device without a touchscreen or trackpad. Ideally, it would work like this: Scroll bouncing in Firefox on macOS. At the same time, you were supposed to be able to scroll up and down through the main contents of the page. The footer at the bottom of the page was supposed to be fixed in its position at the bottom of the page and not move at all.
I first noticed this effect when I was updating a website that I built a long time ago. In other words, when the scrollport has reached its scroll boundary. However, this article focuses on scroll bouncing when you scroll to the very top or very bottom of a web page. You can see a similar effect happen in CSS scroll-snapping between elements. Scroll bouncing (also sometimes referred to as scroll ‘rubber-banding’, or ‘elastic scrolling’) is often used to refer to the effect you see when you scroll to the very top of a page or HTML element, or to the bottom of a page or element, on a device using a touchscreen or a trackpad, and empty space can be seen for a moment before the element or page springs back and aligns itself back to its top/bottom (when you release your touch/fingers). A good understanding of this effect is very helpful for building or designing any website that has fixed elements. The CSS property, overscroll-behavior, which was implemented in Chrome on December 2017 and in Firefox on March 2018, is also described in this article. It contains reviews of several different solutions that are suggested on the web that can be used to prevent scroll bouncing. This article describes the effect of scroll bouncing and how it works on different web browsers.
0 kommentar(er)
