Как сделать скролл колесиком мыши по якорям?

Question

[Sorc Noir]

Концепция: главная страница разделена на 5 неравных(!) по высоте секций, высота каждой секции неопределена (адаптивность).
Задача: сделать вместо стандартного скроллинга колесиком мыши так, чтобы при прокрутке экран плавно перемещался на следующий или предыдущий блок.
Что пробовал: практически все решения из первых 5ти страниц выдачи гугла, включая Scrolify.js, blockScroll.js, Alton.js
Первый неправильно определяет позицию секций, второй ужасно глючит, третий увеличивает высоту блока до 100% от экрана.

Даже написал собственное дико костыльное решение код которого можно посмотреть на фиддле , а посмотреть как работает тут, так как используется mouse-scroll библиотека.

В общем уважаемые знатоки, вопрос в том, как улучшить мой скрипт или что еще можно использовать. Подскажите пожалуйста, заранее спасибо

Answer 1

[Lakewake]

Как на счет такого алгоритма:

1. После загрузки документа составляем массив из якорей и их смещения от верха страницы. Отдельную переменную для активного якоря заготавливаем.
   
2. Прицепляемся на resize окна и обюновляем значения
   
3. По scroll ставим флаг, начинаем анимировать scrollTop до соотв. якоря. По окончании анимации флаг снимаем.
   
4. Если скролл вызывается еще раз, а флаг не сброшен - ничего не делаем.
   

Что-то вроде такого: https://jsfiddle.net/phgsmn8k/

Comments

[Sorc Noir]

Вроде как и решение, но тут есть один геморрой. На подопытном сайте есть такая оранжевая полоса под слайдером, которая исчезает при прокрутке. Она всегда 113 пкс в высоту, также тут есть фиксированное меню с постоянной высотой 71 пкс. В итоге мне приходится делать в прокрутке оффсет - 184px и все заработало нормально, но только на моем разрешении экрана. На более мелких экран останавливается не в должном месте. Я залил тест на сайт который обозначен в топике, можете посмотреть.

[Lakewake]

Sorc Noir: а вы прицепитесь вот так к ресейзу $(window).on('resize load', function() { }); и внутри обновляйте анчоры и любые оффсеты которые нужны, таким образом у вас всегда актуальные координаты будут.

[Sorc Noir]

Vedmaka: вы правы, огромное спасибо!

[Саша]

Vedmaka: не работает у меня пример.

[The_Nameless]

можно пару глупых вопросов от человека, который почти ничего в этом не понимает?=)
попробовал реализовать прокрутку 100% высоты страницы данным методом
почему значение "-1" (var currentAnchor = -1;)?
почему при первоначальной загрузке страницы 1й поворот колесика игнорируется, прокрутка начинается со 2го или 3го поворота?
и как сделать, чтобы не было перехода с последнего якоря обратно к первому?
пробовал заменять в 29й строке currentAnchor = 0; на currentAnchor = currentAnchor; - это работает, но не совсем корректно

[Сергей]

The_Nameless: if( currentAnchor > (anchors.length - 1)) {
currentAnchor = anchors.length - 1;
} else if (currentAnchor < 0 ) {
currentAnchor = 0;
}

[Ferragut]

Все замечательно работает. Только что делать с ресайзом? Когда меняю по окно по ширине, якоря сбиваются. Это можно поправить?

[Евгений Шарафетдинов]

Скрипт не работает в мозиле( подскажите, в чем может быть проблема?

[Полина]

Спасибо, отличное решение!

Правда, у меня тоже не работает в мозилле. Если кто-то нашел, как исправить - буду рада увидеть.

Хочу дополнить скрипт. Мне нужно было сделать подобную прокрутку, но у каждого блока дополнительно есть кнопка "вверх-вниз". Если пролистать страницу кнопками, а потом начать прокручивать, порядок ломается. Поэтому добавила определение текущей позиции, чтобы эти две функции работали корректно вместе.
https://jsfiddle.net/hrkuguty/

[Макс Darkleviathan]

Полина: А как в вашем коде то же самое но без возврата вверх?

[DotDash]

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

[ShadowX]

Решение проблемы с работоспособностью в Mozilla https://stackoverflow.com/questions/16788995/mouse...

[DotDash]

Недавно вернувшись к этому вопросу, с радостью обнаружил, что для этой цели хорошо подходит слайдер swiper с вертикальной прокруткой. тем более, что наличие апи позволяет сделать гораздо больше.

Answer 2

[lnked]

Попробуйте может подойдет fullPage

Comments

[lnked]

вот что то похожее alvarotrigo.com/fullPage/examples/scrolling.html#3...

[Sorc Noir]

Эдик: его тоже пробовал, он тоже увеличивает высоту секций до 100% от экрана =(

Answer 3

[Александр Лелека]

Такой вариант не подходит?
https://youtu.be/RX5kFtUI7q0