.scroll()S2C Home « Events « .scroll()

Scroll event handler.

Description

The .scroll() method is used to bind an event handler to the JavaScript scroll event or trigger that event on the specified element.

  • The scroll event is sent to an element when the user scrolls to a different place within that element. It applies to window objects as well as scrollable frames and elements with the overflow CSS property set to scroll, or the overflow CSS property set to auto when the element's explicit height or width is less than the height or width of its contents.

Syntax

Signature Description
.scroll( )Trigger the scroll JavaScript event on the window object or the specified element.
.scroll( [eventData ,] handler(eventObject) )Bind an event handler to the scroll JavaScript event, optionally passing an object of data.

Parameters

Parameter Description Type
handler( eventObject )A function to execute each time the event is triggered.Function
eventDataAn object of data to pass to the event handler.Anything

Return

A jQuery object.

.scroll( ) ExampleTop

Trigger the scroll JavaScript event on the specified element.

  • This signature is a shortcut for .trigger('scroll').

In the example below we show a new message under the 'div' element with an id of 'scrolldiv1'

Every time the scoll bar is moved with the mouse, or the scroll window is dragged up or down, or moved with the keyboard, jQuery runs the $('#scrolldiv1').scroll(); code which triggers off the scroll JavaScript event on 'scrolldiv1'. This then fires the $('#scrolldiv1').scroll(function(){}) function.


$(function(){
  $('#scrollspan1').hide();
  $('#scrolldiv1').scroll();

  $('#scrolldiv1').scroll(function () {
    $('#scrollspan1').show().fadeOut(1400);
  });
});

scrolldiv1. Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.

We will show a message here. We are scrolling 'scrolldiv1'.

.scroll( handler(eventObject) ) ExampleTop


  • This signature is a shortcut for .on('scroll', handler).

Bind an event handler to the scroll JavaScript event, optionally passing an object of data.

In the example below we show a new message under the 'div' element with an id of 'scrolldiv2' every time the scoll bar is moved with the mouse or the scroll window is dragged up or down or moved with the keyboard.

The scrolling triggers off the scroll JavaScript event on 'scrolldiv2'. This then fires off the $('$('#scrollspan2').append('scroll 2 **JavaScript event triggered**<br>');

What we are doing here is passing across the event object to the function addText(event)method. The data we specify gets tagged onto the event.data property.


$(function(){
  $('#scrolldiv2').scroll(addText);

  function addText(event) {
    $('#scrollspan2').append('scroll 2 **JavaScript event triggered**<br>');
  }
});

scrolldiv2. Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.

We will show a message here.

.scroll( [eventData ,] handler(eventObject) ) ExampleTop


  • This signature is a shortcut for .on('scroll', handler).

Bind an event handler to the scroll JavaScript event, optionally passing an object of data.

In the example below we show a new message under the 'div' element with an id of 'scrolldiv3' every time the scoll bar is moved with the mouse or the scroll window is dragged up or down or moved with the keyboard.

The scrolling triggers off the scroll JavaScript event on 'scrolldiv3'. This then fires off the $('#scrolldiv3').scroll({ param1: '#scrollspan3', param2: 'scroll', param3: '**JavaScript event triggered** ' }, addText2); code.

What we are doing here is passing across the event object to the function addText2(event). The map we specify, in our case { param1: '#scrollspan3', param2: 'scroll', param3: '**JavaScript event triggered** ' } gets tagged onto the event.data property. We then access these parameters in the function via event.data.paramN and use the passed parameters for our appended data.


$(function(){
  $('#scrolldiv3').scroll({ param1: '#scrollspan3', param2: 'scroll 3 ', 
                            param3: '**JavaScript event triggered**  ' }, addText2);

  function addText2(event) {
    $(event.data.param1).append(event.data.param2 + ''<code>' + event.data.param3+ ''</code><br>');
  }
});

scrolldiv3. Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.

We will show a message here.