Detailed explanation of jQuery.scroll() function

The scroll() function is used to bind a handler function to the scroll event of each matching element. This function can also be used to trigger scroll events. In addition, you can also pass some additional data to the event handling function.

The scroll event is triggered when the element's scroll bar position changes. This event generally only applies to window objects or other scrollable elements (generally scroll bars will appear).

In addition, you can call this function multiple times for the same element to bind multiple event handlers. When the scroll event is triggered, jQuery will execute the bound event processing functions in the order of binding.

To delete an event bound via scroll(), use the unbind() function.

This function belongs to the jQuery object (instance).

Syntax

jQueryObject.scroll( [ [ data ,] handler ] )

If at least one parameter is specified, it indicates that the handler function of the scroll event is bound; if it is not specified Any parameter means triggering the scroll event.

Parameters

Parameter Description

data Optional/Any type of data that needs to be passed to the event processing function through event.data when an event is triggered.

handler Optional/event handling function specified by Function type.

jQuery 1.4.3 New support: scroll() supports data parameter.

This in the parameter handler points to the current DOM element. scroll() will also pass in a parameter to the handler: the Event object representing the current event.

If the return value of the function handler is false, it means to prevent the element's default event behavior and stop the event from bubbling in the DOM tree. For example, if the handler function of the click event of the link returns false, the default URL jump behavior of the link can be prevented.

The form's scroll event handler returns false, which can prevent the form's default form submission behavior.

Return value

scroll()The return value of the function is of jQuery type and returns the current jQuery object itself.

Example & Description

Please refer to the following HTML sample code:

<div id="msg" style="height: 3000px;" ></div>
现在，我们为window对象的scroll事件绑定处理函数(可以绑定多个，触发时按照绑定顺序依次执行)：
$(window).scroll( function(event){
    $("#msg").append( $(this).scrollTop() + &#39;<br>&#39; );
} );
// 触发window对象的scroll事件
// $(window).scroll( );

We can also pass some additional data to the event handler function. In addition, through the parameter Event object passed in by jQuery for the event processing function, we can obtain relevant information about the current event (such as event type, DOM element that triggered the event, additional data, etc.):

var maxScrollTop = 1000;
// 向下滚动到据顶部超过1000px时，回到顶部
$(window).scroll( maxScrollTop, function(event){
    var $me = $(this);
    if( $me.scrollTop() > event.data ){
        $me.scrollTop( 0 );
    }
} );

The above is the detailed content of Detailed explanation of jQuery.scroll() function. For more information, please follow other related articles on the PHP Chinese website!