Lightweight JavaScript plugin for monitoring page element scrolling (Original)

Add-ons

2026-07-25 22:53 4 次浏览 • 0 次下载 32.3KB

Plugin Description: Roll is a lightweight JavaScript plugin for monitoring page element scrolling. It executes specified actions when elements enter the viewport. Roll supports IE8+ browsers.

Roll

A lightweight JavaScript plugin for monitoring page element scrolling. It executes specified actions when elements enter the viewport. Roll supports IE8+ browsers. (Note: This plugin reuses code from echo.js.)

Note: Only one instance can be created with new Roll per page at most. During initialization, Roll binds the scroll, resize, and load events to the browser. Creating multiple instances will bind the same events multiple times.

Roll Usage

<body>
    <p class="p1" data-asyncload><img src="images/2.jpg" alt="" /></p>
    <br /><br />....
    <p class="p2" data-asyncload><img src="images/3.jpg" alt="" /></p>
    <br /><br />....
    <p class="p3" data-asyncload><img src="images/4.jpg" alt="" /></p>
    <br /><br />....
    <p class="p4" data-asyncload><img src="images/img1.jpg" alt="" /></p>
    <br /><br />....
    <script>
        var roll = new Roll({
          offsetTop: 100
        });
        console.log(roll);
        roll.push(document.querySelector(".p1"), function (context, done){
            console.log('Image 1 has entered the viewport. You can now perform an action!');
            done(this, context);
        });
        roll.push(document.querySelector(".p2"), function (context, done){
          console.log('Image 2 has entered the viewport. You can now perform an action!');
          done(this, context);
          //roll.destroy();
        });
        roll.push(document.querySelector(".p3"), function (context, done){
          console.log('Image 3 has entered the viewport. You can now perform an action!');
          done(this, context);
        });
        roll.push(document.querySelector(".p4"), function (context, done){
          console.log('Image 4 has entered the viewport. You can now perform an action!');
          done(this, context);
        });
    </script>
</body>

new Roll(options): Available options

callback

Callback function. Executed when a monitored element enters the viewport. Two parameters are passed to the callback when it is invoked. The this context of the function refers to the element that has entered the viewport.

Parameter 1: context
    context is the Roll object instance.
Parameter 2: done
    done is a function. Calling this function stops monitoring the current element.

offsetTop

Sets the distance from the top of the viewport at which the callback starts executing when the element reaches that position. Default value: 0.

offsetLeft

Sets the distance from the left of the viewport at which the callback starts executing when the element reaches that position. Default value: 0.

offsetRight

Sets the distance from the right of the viewport at which the callback starts executing when the element reaches that position. Default value: 0.

offsetBottom

Sets the distance from the bottom of the viewport at which the callback starts executing when the element reaches that position. Default value: 0.

Roll Instance Methods

1	`push(ele, cb, option)`

Adds an element to the monitoring queue. During initialization, Roll binds the scroll, resize, and load events to the browser. Whenever these events are triggered, it checks whether the elements in the queue have entered the viewport. If an element is visible, its callback function is executed.

1. ele: DOM element [Required]

2. cb: Callback function [Optional]. If provided, this callback is executed before the global callback function. It accepts two parameters:

context: Roll object instance
done: A function indicating that the current element no longer needs to be monitored. Usage: done(current DOM element, context);

3. options: Optional parameter. The values specified here override the corresponding options in new Roll(options).

immediate indicates whether to execute once immediately after an element is added to the queue. The default value is true.
offsetTop sets the distance from the viewport's top edge at which the callback function starts executing. The default value is 0.
offsetLeft sets the distance from the viewport's left edge at which the callback function starts executing. The default value is 0.
offsetRight sets the distance from the viewport's right edge at which the callback function starts executing. The default value is 0.
offsetBottom sets the distance from the viewport's bottom edge at which the callback function starts executing. The default value is 0.

destroy

Destroy the current Roll instance