↑ События и обработчики событий в jQuery. | ||||
Урок - Событие scroll в jQuery - скролирование содержимого. | ||||
← Предыдущий урок Урок - Событие resize в jQuery - изменение размера окна.
|
Следующий урок → Урок - Работа с атрибутами-данных. Метод jQuery.data().
|
Метод 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.
↑ События и обработчики событий в jQuery. | ||||
Урок - Событие scroll в jQuery - скролирование содержимого. | ||||
← Предыдущий урок Урок - Событие resize в jQuery - изменение размера окна.
|
Следующий урок → Урок - Работа с атрибутами-данных. Метод jQuery.data().
|