jQuery метод .scroll()

Определение и применение

jQuery метод .scroll() привязывает JavaScript обработчик событий «scroll» (срабатывает при прокрутке элементов), или запускает это событие на выбранный элемент.

Обратите внимание на то, что событие «scroll» посылается, когда изменяется положение прокрутки элемента, независимо от причины, будь-то щелчок мыши на полосе прокрутки, или перетаскивание полосы прокрутки, перетаскивание внутри элемента, при нажатии клавиш со стрелками, или перемещение с помощью колеса мыши.

Событие «scroll» допускается устанавливать не только на объект window , но и на фреймах (элементы ), элементах, свойство overflow которых установлено в scroll , или в auto , когда высота, или ширина элемента меньше, чем высота, или ширина его содержимого.

jQuery синтаксис:

Обращаю Ваше внимание, что метод .scroll(), используемый вместе с функцией, переданной в качестве параметра (handler) является, короткой записью метода .on(), а без параметра является короткой записью метода .trigger():

Добавлен в версии jQuery

Значения параметров

Параметр	Описание
eventData	Объект, содержащий данные, которые будут переданы в обработчик событий.
handler	Функция, которая будет выполнена каждый раз, когда событие срабатывает. Функция в качестве параметра может принимать объект Event .

Пример использования

В этом примере с использованием jQuery метода .scroll() мы при нажатии на элемент (кнопка) вызываем событие «scroll» на элементе

Обратите внимание, что эффект .fadeOut() устанавливает по завершению элементу свойство display в значение none (элемент не отображается), по этой причине мы каждый раз устанавливаем, что элемент должен быть строковый, для его отображения при следующем срабатывании события «scroll». При изменении положения прокрутки элемента

Результат нашего примера:

Пример использования jQuery метода .scroll() (без параметров и с функцией) jQuery события

.scroll()

.scroll( handler ) Returns: jQuery

Description: Bind an event handler to the «scroll» JavaScript event, or trigger that event on an element.

version added: 1.0 .scroll( handler )

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

version added: 1.0 .scroll()

This method is a shortcut for .on( «scroll», handler ) in the first and second variations, and .trigger( «scroll» ) in the third.

The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element’s explicit height or width is less than the height or width of its contents).

For example, consider the HTML:

The style definition is present to make the target element small enough to be scrollable:

Figure 1 — Illustration of the rendered HTML

The scroll event handler can be bound to this element:

Now when the user scrolls the text up or down, one or more messages are appended to

Handler for .scroll() called.

To trigger the event manually, apply .scroll() without an argument:

After this code executes, clicks on Trigger the handler will also append the message.

A scroll event is sent whenever the element’s scroll position changes, regardless of the cause. A mouse click or drag on the scroll bar, dragging inside the element, pressing the arrow keys, or using the mouse’s scroll wheel could cause this event.

Additional Notes:

• As the .scroll() method is just a shorthand for .on( «scroll», handler ) , detaching is possible using .off( «scroll» ) .

Example:

To do something when your page is scrolled:

Как устроен синтаксис обработчика $(window).on(‘scroll’)?

1) Есть такая функция c параметром:

Хочу чтобы она вызывалась при скроллинге страницы. Пишу:

2) Хочу добавить параметр для универсальности:

Пришлось переделать в такой формат:

Нет понимания почему не работает второй вариант. Кто-нибудь может объяснить доступным языком, подробно, почему он не работает ?

1 ответ 1

На самом деле, в документации все довольно неплохо описано. Однако, постараюсь объяснить простым языком.

Когда вы создаете такой код:

Вы делаете function declaration. Иными словами, вы определяете функцию, которая будет вызываться каждый раз, когда срабатывает событие, при этом не вызывая саму функцию.

То же самое происходит, когда Вы делаете так:

Сначала вы декларируете функцию, затем Вы ее «аттачите», но не вызываете ее.

Когда же Вы делаете так:

Вы выполняете вызов функции при попытке аттача хэндлера для события scroll.

В данном случае Ваша функция выполнится и вернет undefined.

Далее, этот undefined и заатачится как хендлер к событию onScroll:

• -> попытка attach’a handler’a для onScroll события
• -> вызов переданной function
• -> function возвращает ‘undefined’
• -> ничего не работает

Решить данную проблему можно было бы еще и так:

В этом случае, у Вас вызовется функция, которая возвращает функцию, которая и станет обработчиком, а не undefined.

По большому счету, это вопрос разницы function call vs function reference

Кроме того, конструкция:

С точки зрения использования jQuery не является верной, так как param1 в данном случае будет содержать event, а не нужный Вам параметр.

jQuery scroll to element

I have this input element:

Then I have some other elements, like other text inputs, textareas, etc.

When the user clicks on that input with #subject , the page should scroll to the last element of the page with a nice animation. It should be a scroll to bottom and not to top.

The last item of the page is a submit button with #submit :

The animation should not be too fast and should be fluid.

I am running the latest jQuery version. I prefer to not install any plugin but to use the default jQuery features to achieve this.

32 Answers 32

Assuming you have a button with the id button , try this example:

I got the code from the article Smoothly scroll to an element without a jQuery plugin. And I have tested it on the example below.

jQuery .scrollTo(): View — Demo, API, Source

I wrote this lightweight plugin to make page/element scrolling much easier. It’s flexible where you could pass in a target element or specified value. Perhaps this could be part of jQuery’s next official release, what do you think?

Examples Usage:

Options:

scrollTarget: A element, string, or number which indicates desired scroll position.

offsetTop: A number that defines additional spacing above scroll target.

duration: A string or number determining how long the animation will run.

easing: A string indicating which easing function to use for the transition.

complete: A function to call once the animation is complete.

More efficient way to handle $(window).scroll functions in jquery?

In the code below, I’m checking to see if the window is being scrolled past a certain point and if it is, change an element to use fixed position so that it doesn’t scroll off the top of the page. The only problem is that is seems to be HIGHLY client-side-memory intensive (and really bogs down the scrolling speed) because at every single scroll pixel I am updating the style attributes over and over on the element.

Would checking if the attr is already there before attempting to update it make a significant difference? Is there a completely different and more efficient practice to get the same result?

As I’m typing this, I notice that StackOverflow.com using the same type of functionality with their yellow «Similar Questions» and «Help» menus on the right hand side of this page. I wonder how they do it.

5 Answers 5

One technique you can use is to set a timer on the scroll event and only do the main work when the scroll position hasn’t changed for a short period of time. I use that technique on resize events which have the same issue. You can experiment with what timeout value seems to work right. A shorter time updates with shorter pauses in scrolling and thus may run more often during the scroll, a longer time requires the user to actually pause all motion for a meaningful time. You will have to experiment with what timeout value works best for your purposes and it would be best to test on a relatively slow computer since that’s where the issue of scroll lag would be most pronounced.

Here’s the general idea how this could be implemented:

You may also be able to speed up your scroll function by caching some of the selectors when the scrolling first starts so they don’t have to be recalculated each time. This is one place where the extra overhead of creating a jQuery object each time might not be helping you.

Here’s a jQuery add-on method that handles the scrolling timer for you:

Your code would then be implemented like this: