@kiyotd/is Browser Demo

Browser direct usage example (UMD format)

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

You can use it by loading the UMD file as follows:

<script src="dist/is.umd.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Use as direct global objects
    const isScrolled = new IsScrolled();
    isScrolled.init();

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