Страницы

Поиск по вопросам

вторник, 21 мая 2019 г.

Переход на следующую страницу при “доскролле” до низа страницы

Доскроллив до конца страницы должен произойти переход на следующую страницу с задержкой. Сайт пример , но тут все на ангуляре и не понятно.
Делаю так, при "доскролле" начинает срабатывать (если срабатывает) setTimeout и переход, если в это время начать скроллить вверх, переход должен отменяться:
var scrollY = $(window).scrollTop(), currentOffset = scrollY + window.innerHeight, element = $('footer'), bg = $('.next-route__overlay'), offset = element.offset().top, adress = $('.route-link').data('link'), timeout, show = false; console.log(offset + ' ' + currentOffset); $(window).scroll(function(){ if(offset <= $(window).scrollTop()+window.innerHeight){ show = true; bg.show(); timeout = setTimeout(window.location.replace(adress), 5500); }else { show = false; clearTimeout(timeout); } }); main { height: 2000px; background: #ccc; } footer { padding: 1rem; text-align: center; } .next-route__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 4rem; background: #000; opacity: .5; display: none; }


Вопрос: как можно осуществить автоматический переход на следующую страницу "доскроллив" до конца страницы средствами jquery (js), но при обратном сролле переход должен отменяться?


Ответ

в вашем коде две проблемы.
в качестве аргумента setTimeout вы пишите выражение, в данном случае оно вычисляется сразу, т.к. это не ссылка на функцию, а ее вызов. Вам следует использовать функцию, внутри которой уже будет заменен location Событие скролла вызывается постоянно, в итоге вы несколько раз подряд взываете setTimeout каждый раз генерируется новый хэндл. Когда же вы начинаете крутить вверх, то очищаете только последний сгенерированный таймаут, а предыдущие созданные остаются и срабатывают. Поэтому назначать новый setTimeout нужно только в том случае, если он еще не вызыван.
var scrollY = $(window).scrollTop(), currentOffset = scrollY + window.innerHeight, element = $('footer'), bg = $('.next-route__overlay'), offset = element.offset().top, adress = $('.route-link').data('link'), timeout = null, show = false; console.log(offset + ' ' + currentOffset); $(window).scroll(function(){ if(offset <= $(window).scrollTop()+window.innerHeight){ show = true; bg.show(); if(!timeout){ timeout = setTimeout(function(){ window.location.replace(adress); }, 5500); } } else { show = false; clearTimeout(timeout); timeout = null; } }); main { height: 2000px; background: #ccc; } footer { padding: 1rem; text-align: center; } .next-route__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 4rem; background: #000; opacity: .5; display: none; }


Комментариев нет:

Отправить комментарий