Как реализовать прокрутку страницы по блокам?

Question

[historydev]

Доброе утро. Скажите пожалуйста как реализовать такое на чистом js, не охота захламлять проект всякими плагинами. Спасибо.

UPD: Вот тут пример и один из горы плагинов
Я вижу это примерно так:

document.body.onscroll = () => {
  document.body.scrollTo(0, window.innerHeight);
};

Comments

[WapSter]

Для таких элементов лучше брать готовые плагины, так как множество нюансов есть, которые не учтешь. Сообщество же старается баги править. Допустим у этого плагина не работает навигация по нажатию tab.

[historydev]

WapSter, так я для этого и хочу, чтобы не привязывать себя к какому-то левому плагину не зная что под капотом,а самому потихоньку разбираться что и где.

Answer 1

[Пашенька]

Это ублюдский плагин. Но в любом случае, если не хочется брать готовый плагин, то придётся писать свой. Что именно непонятно? Вопрос слишком общий. Вешаешь слушатель на скролл, на некоторый порог скролла начинаешь форсить его своей анимацией и на этот период блокируешь любое взаимодействие с интерфейсом, владеешь информацией какая секция активна, какие отступы секций от топа, какой у неё индекс относительно всего массива секций ну и прочее, там много всего. А потом всё это ещё с тачем подружить надо будет.

Comments

[historydev]

Вот что я уже нашёл и пытаюсь адаптировать, непонятно вот что, допустим я могу реализовать при скролле вниз добавление высоты, а как с верхом?

window.onscroll = function() {
    let doc = document.body,
        docOffset = doc.scrollTop + window.innerHeight,
        docHeight = doc.offsetHeight;

    console.log('offset = ' + docOffset);
    // console.log('height = ' + docHeight);

    if (docOffset >= docHeight) {
        console.log('At the bottom');
    }
};

[Пашенька]

Владимир, не нужно никакую высоту добавлять. Нужно текущий вьюпорт ограничивать оверфлоу хидденом.

[historydev]

like-a-boss, покажете?

[Пашенька]

Владимир, ну это пол плагина нужно написать, чтоб показать что-то. Я отвечу иначе: если нет полного понимания, как работает CSS и JavaScript, то и незачем это писать. Стоит уделить внимание вещам попроще, чтобы сложить прочный фундамент сначала, после этого не будет возникать вопросов такого рода, когда необходимо к кому-то обращаться за ответами, поверьте моему экспириенсу. Тогда появится чувство уверенности в возможности написать вообще что угодно.
Либо.. Берёте ручку, бумагу, упорство и начинаете рисовать работу плагина на бумаге, блокируете тостер и настойчиво разбираетесь во всем самостоятельно - это самый быстрый путь, кстати, к тому, чтобы не задавать вопросов.

[historydev]

like-a-boss, к этому и стремлюсь, но т.к. если я учусь то перегружаюсь и на работу уже сил нет, я фрилансер. Поэтому я выбираю моменты которые хотел бы изучить, гуглю и параллельно кидаю тике на тостер чтобы получить экспертное мнение, сэкономить времени чутка, пока гуглю, сюда уже ответы приходят, я сравниваю информацию и делаю выводы. Спасибо :)

[Пашенька]

Владимир, я говорю о другом подходе: не гуглить решение проблемы как таковой, в данном случае - «Как реализовать прокрутку страницы по блокам?» это ничему не научит.
Такая большая задача раскладывается на огромное множество микро-задач, к примеру: как получить отступ элемента от топа документа, или от вьюпорта, как кроссбраузерно узнать размеры элемента и т.д. Вот что гуглится и только.
Когда я писал свои первые слайдеры или параллаксы я делал именно так и не спрашивал никого ни разу на этот счёт. Я просто днями сидел, рисовал и пилил(я тоже бездельник). Мне потом снились эти параллаксы и абстрагировавшись от компьютера, кстати, зачастую приходило 100% понимание реализации. Но я сейчас навязываю свой опыт взаимодействия, но я могу сказать что это прокачивает очень быстро, когда решишь буквально задачек пять такой сложности будешь уже готов ко всему. А сейчас какой-то застой, выгорание, неинтересно как-то, но это уже другая история.

[historydev]

like-a-boss, в этом и дело, я не хочу знать всё и сразу, а решать по мере необходимости чтобы сохранить девственный интерес к коду как в детстве на протяжении большего времени.

Answer 2

[Alex]

// По событию скрола
window.addEventListener('scroll', function() {
  // Найти блок к которому нужно проскролить
  const element = document.querySelector('#target')

  // скролим к элементу
  element.scrollIntoView({ behavior: 'smooth' })
});

Comments

[Alex]

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

[historydev]

Alex, об этом и речь, калл, а не паттерн, скроллит только в одну сторону, медленно либо со скоростью света,точно не моё решение. Спасибо)

[Alex]

Владимир, Я имел в виду не свой код, а идею скролить страницу по блокам :)

[historydev]

Alex, Ааа, прошу пардонить синьёр :) Думаете не стоит? Мне например не мешало такое, непривычно если только)

[Alex]

Владимир, Определённо не стоит. Это море гемороя для вас, как разработчика, и море неудобств для пользователя вашего интерфейса, ради весьма сомнительного дизайнерского решения.

Такой интерфейс имеет место, но только в специфичных задачах. Но не для большинства сайтов.

И причин на то великое множество. Например у пользователей macOS и iOS очень чувствительный скролл. Они привыкли, что страница реагирует на малейшее движение пальца, и смещается хоть по пол пикселя. И любой плагин который вмешивается в нативный скрол только бесит.

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

Чтобы прокрутка по блокам нормально работала, эти самые блоки должны всегда соответствовать размерам экрана. И контент в них всегда обязан помещаться на экран. Вы как разработчик должны это гарантировать, так как если блок не влезет, у пользователя не будет возможности проскролить чуть ниже. А это весьма не просто. Возьмите хотя бы смартфон: при скроле вверх, вниз, адресная строка браузера то появляется, то исчезает. При открытии клавиатуры у некоторых браузеров пересчитывается размер окра, а у некоторых — нет. Смартфон можно перевернуть. Существуют популярные iPhone SE с маленьким экраном, на который больше 5 слов и одной кнопки, не влезет так, чтобы это было читаемо.

В конце концов, Web — весьма не надежная штука. Любое расширение браузера может сломать ваш сайт. Браузер может заблокировать загрузка вашего скрипта, или ваш сайт в целом может не догрузится. И если вы в стилях добавили какой-то ограничитель, рассчитывая что скрол будет по средством JS — то ваш сайт превращается в неработающий кирпич.

И ещё очень много ситуаций, в которых ваш сайт с подобным решением работает хуже чем с нативным скроллом.

[historydev]

Alex,(извините за поздний ответ, отключился). Читаю, кстати о контенте я это учёл и каждый блок имел бы свой независимый скролл. Да, прочитал всё, очень всё в точку, пожалуй забуду про подобное на некоторое время, пока не дойдёт понимание естественным путём. спасибо большое)