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

• <<    .resize()
• .load()     >>

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

Parameters

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);
  });
});

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>');
  }
});

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>');
  }
});

We will show a message here.

• <<    .resize()
• .load()     >>