.scroll( handler(eventObject) )

Прикрепляет обработчик к JavaScript событию “scroll” (скролл) или генерирует само событи

  • version added: 1.0.scroll()

    Данный метод не принимает аргументов.

  • version added: 1.0.scroll( handler(eventObject) )

    Тип: Функция

    Функция, которая будет запускаться каждый раз при наступлении события.

  • version added: 1.4.3.scroll( [eventData ], handler(eventObject) )

    eventData

    Тип: Объект

    Объект с данными, который будет передан в обработчик.


    handler(eventObject)

    Тип: Функция

    Функция, которая будет запускаться каждый раз при наступлении события.

Данный метод является упрощённым сокращением операции .on('scroll', handler) или .trigger('scroll').

Данное событие происходит, когда пользователь осуществляет скролл по элементу. Может быть применён и для объекта window, так и для других фрэймовых элементов, к которым через CSS можно задать свойства scroll.

К примеру, у нас есть html код:

<div id="target" style="overflow: scroll; width: 200px; height: 100px;">
  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 id="other">
  Trigger the handler
</div>
<div id="log"></div>

Стилем мы задали данном элементу свойства для скролла:

Далее можем прикрепить функции для обработки события:

$('#target').scroll(function() {
 $('#log').append('<div>Handler for .scroll() called.</div>');
});

Теперь при сколле вверх или вниз, мы увидим сообщения в блоке <div id="log"></div>:

Handler for .scroll() called.

Для генерации события, вызовите метод .scroll() без аргументов:

$('#other').click(function() {
 $('#target').scroll();
});

Пример

Выполнить действие при скролле страницы.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scroll demo</title>
  <style>
  div { color:blue; }
  p { color:green; }
  span { color:red; display:none; }
  	</style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <div>Try scrolling the iframe.</div>
  <p>Paragraph - <span>Scroll happened!</span></p>
<script>
$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
$(window).scroll(function () {
  $("span").css("display", "inline").fadeOut("slow");
});
</script>

</body>
</html>
или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 31 Октября 2014 14:17
    Memfis76
    Пример почему-то не работает ни FF ни в GH...
^ Наверх ^