Горизонтальная прокрутка с помощью колесика мыши - PullRequest
Новая
       11

Горизонтальная прокрутка с помощью колесика мыши

0 голосов
/ 14 января 2012

Я использую метод Криса Койера для инкапсуляции ячеек таблицы вокруг элементов div через js для достижения горизонтальной прокрутки http://css -tricks.com / how-to-create-a-horizontally-scrolling-site /, Однако для прокрутки вам понадобится либо мышь с горизонтальной прокруткой, либо удерживать Shift во время прокрутки.

Итак, я использовал этот плагин hscroll.js http://paulicio.us/items/view/24/horizontal-page-scrolling-using-javascript, который позволяет прокручивать страницу в поперечном направлении с помощью колесика мыши.

Но при тестировании в Firefox и Opera наблюдается значительное отставание / нестабильность (отлично работает в Chrome и Safari). Я думаю, что Mousewheel.js Брэндона Аарона http://brandonaaron.net/code/mousewheel/docs был бы жизнеспособным решением, но я не знаю, как реализовать плагин, потому что я неграмотен, когда дело доходит до js.

Jsfiddle: http://jsfiddle.net/694TK/3/

Обновление: Плагин tinyscroll, кажется, работает нормально, за исключением того, что он не имеет замедления, какое-либо решение для этого ?: http://jsfiddle.net/694TK/6/

Еще одно обновление: http://jsbin.com/uwehot/
Круглая карусель с содержимым Мэри Лу * (http://tympanus.net/codrops/2011/08/16/circular-content-carousel/)* здесь).
Это работает довольно хорошо, за исключением того, что якорные ссылки не будут работать.

1 Ответ

0 голосов
/ 14 января 2012

Хм, я не думаю, что настольный подход достаточно хорош. Попробуйте обернуть свои абзацы и установить якорь Ссылки на заголовки

То, что якорные ссылки будут старт-стоп-метками вашей анимации Каждый раз, когда пользователь начинает прокручивать (событие будет запускаться вашим плагином), анимация начинается и заканчивается следующей привязкой Посмотрите пример

Этот парень использует события нажатия кнопки, чтобы вызвать его анимацию 

$('#btn_two').click(function(){
$('.nav').fadeOut("fast").fadeIn("slow");
$.scrollTo(this.hash, 1500, { easing:'elasout' });
});

Вы будете использовать событие mousewheel. Это немного жестокий подход, хотя Для плавного перемещения при прокрутке пользователя необходимо использовать плагин замедления

...