Урок - Событие scroll в jQuery - скролирование содержимого.

Главная » Курсы » Курс jQuery, Быстрый старт. (jQuery 1.10.2 / jQuery 2.0.3) » Урок - Событие scroll в jQuery - скролирование содержимого.
Группа вКонтакте
Лицензия: Лицензия Creative Commons.

Метод jQuery.scroll() привязывает обработчик к JavaScript-событию "scroll" или вызывает его для элемента.

Синтаксис метода jQuery.scroll().

  • jQuery(<selector>).scroll( handler(eventObject) )
  • jQuery(<selector>).scroll( [eventData ], handler(eventObject) )
  • jQuery(<selector>).scroll()

jQuery(<selector>).scroll( handler(eventObject) )

где

  • handler(eventObject) - функция, обработчки события, будет выполняться каждый раз при возникновении события "scroll".

Метод jQuery.scroll() (в данном синтаксисе) - является псевдонимом для jQuery.on('scroll', handler).

jQuery(<selector>).scroll( [eventData ], handler(eventObject) )

где

  • eventData - объект содержащий данные, для передачи в обработчик.
  • handler(eventObject) - функция, обработчки события, будет выполняться каждый раз при возникновении события "scroll".

Метод jQuery.scroll() (в данном синтаксисе) - является псевдонимом для jQuery.on('scroll', handler).

jQuery(<selector>).scroll()

В этом случае метод jQuery.scroll() не принимает аргументов.

Метод jQuery.scroll() (в данном синтаксисе) - является псевдонимом для jQuery.trigger('scroll').

Описание метода jQuery.scroll().

Событие 'scroll' посылается элементу, когда пользователь прокручивает содержимое окна браузера или скролируемого объекта (DOM-элемента с установленым CSS-cвойством overflow в scroll или auto (когда содержимоые выходит за границы)).

Событие 'scroll' возникает в случае любого прокручивания содержимого страницы: прокручивание колесом мыши, прокручивание панелью скролинга, смещение курсора с помощью клавиатуры.

Рассмотрим на примере:

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0-beta1/jquery.min.js"></script>
    <script>window.jQuery || document.write(unescape('%3Cscript src="http://code.jquery.com/jquery-1.10.0-beta1.js"%3E%3C/script%3E'))</script>
    <script>window.jQuery || document.write(unescape('%3Cscript src="/js/jquery-1.10.0-beta1.js"%3E%3C/script%3E'))</script>
    <script type="text/javascript">
        jQuery(function(){

$(window).scroll(function() {
    $("#scrollWindow").show().fadeOut("slow");
});
$('#scrollBox1').scroll(function() {
    $("#scrollLog1").show().fadeOut("slow");
});
$('#scrollBox2').scroll(function() {
    $("#scrollLog2").show().fadeOut("slow");
});

$('#buttonWindow').click(function() {
    $(window).scroll();
});
$('#buttonBox1').click(function() {
    $("#scrollBox1").scroll();
});
$('#buttonBox2').click(function() {
    $("#scrollBox2").scroll();
});

        });
    </script>
    <style>
        .big {
            background: none repeat scroll 0 0 lightgreen;
            border: 1px dashed green;
            float: left;
            height: 300px;
            margin: 0 10px 10px 0;
        }
    </style>
</head>
<body>
    <div style="position:fixed;top:0;left:0;background:#fff;color:red">
        <span id="scrollLog1" style="display:none;">Box 1 Scrolling</span>
        <span id="scrollLog2" style="display:none;">Box 2 Scrolling</span>
        <span id="scrollWindow" style="display:none;">Window Scrolling</span>
    </div>
    <div id="scrollBox1" style="overflow: scroll; width: 300px; height: 300px;">
        <div id="scrollBox2" style="overflow: scroll; width: 200px; height: 200px;">
            <div style="width:300px">
                <div class="big" style="height:500px;width:50px">
                </div>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit
                esse cillum dolore eu fugiat nulla pariatur. Excepteur
                sint occaecat cupidatat non proident, sunt in culpa qui
                officia deserunt mollit anim id est laborum.
            </div>
        </div>
    
        <div style="width:800px">
            <div class="big" style="height:500px;width:50px">
            </div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur. Excepteur
            sint occaecat cupidatat non proident, sunt in culpa qui
            officia deserunt mollit anim id est laborum.
        </div>
    </div>
    <div>
        <button id="buttonWindow">Scroll Window</button>
        <button id="buttonBox1">Scroll Box 1</button>
        <button id="buttonBox2">Scroll Box 2</button>
    </div>
    <div class="big" style="height:2000px;width:150px">
    </div>
</body>
</html> 

Мы назначили три обработчика: для window, для внешнего элемента id="scrollBox1", для вложенного элемента id="scrollBox2".

$(window).scroll(function() {
    $("#scrollWindow").show().fadeOut("slow");
});
$('#scrollBox1').scroll(function() {
    $("#scrollLog1").show().fadeOut("slow");
});
$('#scrollBox2').scroll(function() {
    $("#scrollLog2").show().fadeOut("slow");
});

Обработчики будут включать отображение индикаторов:

<div style="position:fixed;top:0;left:0;background:#fff;color:red">
    <span id="scrollLog1" style="display:none;">Box 1 Scrolling</span>
    <span id="scrollLog2" style="display:none;">Box 2 Scrolling</span>
    <span id="scrollWindow" style="display:none;">Window Scrolling</span>
</div>

Также у нас есть кнопки посылающие события 'scroll' cоответственно в window, id="scrollBox1" и id="scrollBox2".

$('#buttonWindow').click(function() {
    $(window).scroll();
});
$('#buttonBox1').click(function() {
    $("#scrollBox1").scroll();
});
$('#buttonBox2').click(function() {
    $("#scrollBox2").scroll();
});

Обратите внимание, что вызов события на элементе scrollBox1 через тригер вызовет обработчик для scrollBox1 и window, вызов события на элементе scrollBox2 - вызовет обработчики для scrollBox2, scrollBox1 и window.