@kiyotd/is Demo

The following classes will be added to the body element based on scroll and device detection:

• is-scrolled - When scrolled a certain amount
• is-scroll-top - When near the top of the page
• is-scroll-bottom - When near the bottom of the page
• is-scroll-up - When scrolling upward
• is-scroll-down - When scrolling downward
• is-bp-sm / is-bp-md / is-bp-lg / is-bp-xl - Breakpoint detection
• is-android / is-iphone / is-ipad / is-pc - Device detection
• is-chrome / is-firefox / is-safari / is-ie / is-edge - Browser detection

Check the body element classes in the developer tools while scrolling.

Usage

ESM format usage example (via npm or direct import)

<script type="module">
  import { IsScrolled, IsDevice } from './dist/is.min.js';

  document.addEventListener('DOMContentLoaded', () => {
    const isScrolled = new IsScrolled();
    isScrolled.init();

    const isDevice = new IsDevice();
    isDevice.init();
  });
</script>

For browser direct usage example, see browser.html.