Теория скроллинга — javascript

Теория скроллинга - javascript
В предыдущей статье начал рассуждения по поводу скроллинга внутри объекта.
Теория скроллинга.

Сегодня, надеюсь с вашей помощью, я найду правильное решение, так как я еще не реализовал то, что задумал.

Не рассмотрены у нас остались следующие пункты:

  • Javascript: скроллинг при помощи ползунка
  • Javascript: скроллинг при помощи полосы прокрутки
  • Javascript: Научиться останавливаться ползунок, чтобы не выходил за края

1. Javascript: скроллинг при помощи ползунка.

Все действие начинается при событии mousedown на ползунке. Мы рассчитываем горизонтальное положение мышки и подстраиваем его под нашу полосу прокрутки. Другими словами, подгоняем значение относительно нашей полосы.

Нашему ползунку задаем параметр left с этим значением (назовем его x).

А блоку left со значением: -k.

Где k = x * ( m — l ) / (l — r).
x = горизонтальное значение мышки;
m = ширина блока, в котором расположены все страницы;
l = ширина видимой области;
r = ширина ползунка.

Когда происходит сам клик или mouseup, перемещение ползунка останавливается, а следовательно и перемещение блока.

Вот и все наше перемещение. Можно считать, что наш скроллинг или его основная часть уже готовы.

2. Javascript: скроллинк при помощи полосы прокрутки.

Все довольно просто. Кликаем по полосе прокрутки, рассчитываем положение мышки. Исходя из этого значения корректируем положение ползунка и положение блока.

3. Javascript: Научиться останавливаться ползунок, чтобы не выходил за края.

Рассчитываем «x» также, как и в пункте 1 этой статьи. Если x < 1, то значение становится статическим и равным 0. Если x > {ширина полосы прокрутки — ширина ползунка}, значение также становится статичным и {..}.

В ближайшее время постараюсь реализовать.

Если вы заметили какие-то недочеты, или хотите сделать поправки, говорите : ).

Комментарии — Один комментарий

  1. […] Последняя получает значения из скрипта: initDragF (x,m,l,r,k). Что они означают, можно узнать из предыдущей статьи теория скроллинга — javascript. […]

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting