Горизонтальный скроллер с Mootools

Question

Я работаю над сайтом для себя, и я использую пользовательский горизонтальный скроллер с Mootools, который я получил с другого сайта (и получил разрешение на использование).Несмотря на то, что мне удалось заставить скроллер работать так, как я хочу, есть две проблемы, которые я ищу, чтобы решить, и у меня нет ноу-хау, чтобы разобраться.

Я имеюнастроить простую демонстрационную страницу здесь .

Вы можете перемещаться с помощью колесика мыши / трекпада вверх и вниз или влево и вправо, вы можете захватить скроллер и перетащить его, и вы можете щелкнуть где угодновдоль линии, чтобы прыгать прямо.Так что все функции в порядке.Мои проблемы:

1. Если вы прокрутите до середины (или в любом месте, кроме начальной позиции), а затем измените размер окна браузера, ручка прокрутки переместится обратно в начало / влево, даже еслисодержимое остается на месте.Если вы снова начнете прокручивать, содержимое отскочит назад, чтобы выровнять положение ручки прокрутки.В идеале ручка останется на месте, когда окно будет изменено, но я не могу понять, как это сделать самостоятельно.

2. В конце / справа от страницы я бынравится иметь кнопку «назад», которая плавно прокручивает вас назад к началу / «вершине».Лучшее, что мне удалось - это то, что вы видите сейчас, когда содержимое плавно прокручивается назад, а скроллер просто возвращается на свою первую позицию.Хотя я мог бы обойти эту проблему, просто переместившись прямо к началу, было бы гораздо приятнее, если бы скроллер плавно прокручивал свой путь назад, как это делает содержимое.

Любойпомощь с этим будет принята с благодарностью!

Answer 1

Ваша первая проблема возникает из-за того, что positionIt () вызывается при каждом изменении размера окна.Рассматривая эту функцию, вы можете видеть, что bottomSlider инициализируется каждый раз.Я бы разбил positionIt () на функцию инициализации и функцию позиционирования и гарантировал, что при изменении размера окна вызывается только функция позиционирования.

Вторую проблему, вероятно, можно устранить, создав отдельную функцию step () дляbottomSlider и вызов этого внутри onChange, вместо использования встроенной анонимной функции.Затем вы можете создать таймер или анимацию, которая вызывает step (), чтобы переместить полосу прокрутки обратно в исходное положение (и впоследствии переместить область просмотра в соответствии с ней.)

Надеюсь, это имеет какой-то смысл!