Refer to the original

1. position: sticky;

(MDN portal) element is positioned according to the normal document flow, and then relative to its nearest scrolling ancestor and containing block; Includes table-related elements, offset based on top, right, bottom, and left values. The offset value does not affect the position of any other elements.

This value always creates a new stacking context. Note that a sticky element will “fix” on the nearest ancestor with a “scroll mechanism” (when the ancestor’s overflow is hidden, Scroll, auto, or overlay), even if the ancestor is not the closest true scrollable ancestor. This effectively inhibits any “sticky” behaviour

Browser support:

2. The CSS parallax

Using CSS Perspective (MDN portal), the CSS property Perspective specifies the distance between the observer and the z=0 plane, giving perspective to elements with three-dimensional position transformations. The three-dimensional element z>0 is larger than normal, and z<0 is smaller than normal, depending on the value of this attribute.

When an element has perspective, scrolling will have different depth of field effects depending on how far it is.

The DEMO (codepen. IO)

Browser support:

3. CSS scroll to it

Using CSS scroll-snap-type (MDN portal), just like Flex, add scroll-snap-type to an element, and the child element will be regarded as the scroll-snap child element, and the child element will set the corresponding scroll-snap-align attribute to control the automatic alignment.

The DEMO (codepen. IO)

Browser support:

4. DOM scrolling API

Window.scrollto () (MDN portal), an API implemented by javascript in the browser host.

Scroll behavior (MDN portal) Sets the API scroll behavior.

Browser support:

5. Intersection Observer API

(MDN portal) IntersectionObserver() Constructor creates and returns a IntersectionObserver object. If rootMargin is specified it is checked for syntax, thresholds are checked to ensure that all are between 0.0 and 1.0, and the list of thresholds is sorted in ascending order. If the threshold list is empty, it defaults to an array of [0.0].

Browser support:

6. Roller events

(MDN portal) The wheel event is triggered when the mouse wheel is rolled or other similar input device is operated. The scroll wheel event replaces the deprecated non-standard Mousewheel event.

This interface inherits the attributes of the parent interface MouseEvent, UIEvent and Event. Mouseevent. offsetX The X coordinate of the mouse pointer relative to the inside edge position of the target node; Mouseevent. offsetY Y coordinate of the mouse pointer relative to the inside edge position of the target node.

Browser support:

tool

  • ScrollMagic
  • ScrollScene
  • ScrollTrigger
  • Locomotive Scroll