On Scroll Event

When to use it?

On Scroll Event aims to manage scroll events on a web page. It provides a way to execute a callback function when the user scrolls a specified distance down the page, to track how far users scroll for analytics purposes, or even Implementing “scroll to reveal” animations or features.

How To use it?

boostify.scroll({
    distance:300,
    callback: async () =>{
       console.log('callback when user scroll more than 300 pixels')
    }
})

Configuration options

• distance: Number - (100px by default) - The scroll distance from the top of the page (in pixels) at which the callback function should be executed.
• name: String - Optional value if you have two triggers with same distance, and you want to differentiate.
• callback: function A function to be called once the scroll distance is reached. This function can contain any actions you want to perform at that point.

Utilities

Occasionally, you may encounter scenarios where it becomes necessary to eliminate or deactivate the scroll event. This could arise for various reasons, perhaps to enhance user experience or to adjust to changes in the webpage’s content or functionality.

// you need to specify the distance trigger you want to eliminate.
boostify.destroyscroll({distance:300})

In certain situations, you might encounter a scenario where two triggers are set at the same distance. Rest assured, this poses no issue.

// Instance A
boostify.scroll({
    distance:300,
    callback: async () =>{
       console.log('callback at 300 px A')
    }
})
// Instance B
boostify.scroll({
    distance:300,
    callback: async () =>{
       console.log('callback at 300px B')
    }
})

Should you face a scenario where it’s necessary to remove one of two events set at the same distance, you have the option to assign a name to each event for easy identification and tracking.

// Instance A
boostify.scroll({
    distance:300,
    name:'A',
    callback: async () =>{
       console.log('callback at 300 px A')
    }
})
// Instance B
boostify.scroll({
    distance:300,
    name:'B',
    callback: async () =>{
       console.log('callback at 300px B')
    }
})
// Specify which event to remove
boostify.destroyscroll({distance: 300, name: "B"});

There is helper functions that you can use inside your callback: - **Load Style** - **Load Scripts** - **Video Player** - **Video Embed**

Real World Examples

Example 1

This example will change the body of your website at 300 pixels, it is beneficial if you want to make some smooth transition and this want to include that <style> to the body

boostify.scroll({
    distance:300,
    callback: async () =>{
        await boostify.loadStyle({
            inlineStyle: `
                body{background:red; transition: background 0.5s ease-in-out;}
            `,
            appendTo: 'body'
        });
    }
})

---

Example 2

In this example you are loading Tiny Slider when the user scroll 200 pixels, this approach is advantageous because it optimizes your bundle size and reduces the JavaScript processing time, significantly improving performance.

boostify.scroll({
    distance:200,
    callback: async () =>{
        await boostify.loadStyle({
            url: 'https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css',
            attributes: ['media=all'],
            appendTo: 'head'
        });
        await bstf.loadScript({
            url: 'https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js',
            attributes: ['type="text/javascript"'],
            appendTo: 'body'
        });
        var slider = tns({
            container: '.my-slider',
            items: 3,
            slideBy: 'page',
            autoplay: true
        });
    }
})