back

Smooth scroll

Adds smooth scroll with native scrollbar preserved.

Usage

Add data-lg-smooth attribute to your <html> element:

<html data-lg-smooth>
  // Your page...
</html>

When the smooth scroll is enabled the <html> element gets a .has-smooth-scroll class.

The smooth scroll inertia (how slow/fast it is, lower value means slower scroll) can be changed globally in JS luge.settings({smooth: {inertia: 0.1}}).

Smooth scroll is disabled on mobile, IE and Safari < 12.

Scroll event

The scroll internal event is emitted during smooth scroll (see Emitter). The scroll value is accessible inside the global window object, as well as other properties:

  • window.scrollTop: alias of window.pageYOffset ;
  • window.hasSmoothScroll : indicates if current page is using smooth scroll or not ;
  • window.maxScrollTop : contains the maximum scroll top value for the current page ;
  • window.scrollProgress : contains the scroll progress in the document from 0 to 1 ;