В предыдущей статье начал рассуждения по поводу скроллинга внутри объекта.
Теория скроллинга.
Сегодня, надеюсь с вашей помощью, я найду правильное решение, так как я еще не реализовал то, что задумал.
Не рассмотрены у нас остались следующие пункты:
- 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 > {ширина полосы прокрутки — ширина ползунка}, значение также становится статичным и {..}.
В ближайшее время постараюсь реализовать.
Если вы заметили какие-то недочеты, или хотите сделать поправки, говорите : ).
Ответить | Цитировать