back

Smooth scroll

Adds smooth scroll with native scrollbar preserved.

Usage

Wrap your site inside a container:

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

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.smoothScrollTop: contains the smooth scroll top value ;
  • window.unifiedScrollTop : contains whether scrollTop or smoothScrollTop value depending on which one is used ;
  • 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 ;
  • window.smoothScrollProgress : contains the smooth scroll progress ;