#javascript
#javascript
Вопрос:
Я хочу, чтобы прослушиватель событий прокрутки запускался, когда пользователь прокручивает страницу в первый раз, но затем прекращал запуск через определенное время и просто позволял пользователю нормально прокручивать.
Вот как у меня сейчас это работает:
var scrollcount = 0
// Scroll event listener
window.addEventListener("scroll", function() {
setTimeout(function() {
scrollcount
if (scrollcount < 40) {
window.scrollTo(0, 0);
}
}, 1200);
});
scrollcount Переменная увеличивается вместе с прокруткой, и 40 — это примерно столько, сколько требуется для одной прокрутки вверх на трекпаде моего ноутбука. Если счетчик меньше 40, страница прокручивается обратно до верха страницы, как только пользователь отпускает колесо прокрутки, если больше 40, этого не происходит.
Я понимаю, что это действительно плохой способ сделать это, поэтому мне интересно, есть ли у кого-нибудь более надежный способ сделать это. Я пытался заставить метод removeEventListener отключить прослушиватель событий, как только setTimeout завершит свою задержку, но я не смог настроить его на окно. Я думаю, что removeEventListener работал бы, если бы прослушиватель событий прокрутки был назначен контейнеру div, а не окну, но когда я попробовал, что прослушиватель событий прокрутки не будет работать в первую очередь.
Я хотел бы избежать jQuery или любой другой библиотеки, если смогу, но на данный момент я буду использовать все, что обеспечивает надежную работу.
Комментарии:
1. Это очень похоже на проблему XY . Не могли бы вы объяснить, в чем заключалась ваша первоначальная проблема? Вы пытаетесь прокрутить страницу до верха страницы, когда пользователь пытается прокрутить страницу в первый раз?
2. ДА. Однако я не хочу, чтобы он запускался немедленно. Первая прокрутка пользователя запускает некоторую анимацию, и как только эти анимации будут завершены, я хочу, чтобы окно вернулось к началу страницы, после чего я хочу, чтобы пользователь мог свободно прокручивать. Моя проблема в том, что я могу заставить его перейти к началу страницы, и
scrollcountпосле этого он не вернется к началу и позволит пользователю прокручивать, но это решение настолько специфично для моего экрана / трекпада, что оно не будет работать на планшетах / мобильных устройствах / других компьютерах. Мой вопрос: наверняка есть лучшее решение?
Ответ №1:
Вам нужно указать имя вашего прослушивателя, чтобы удалить его:
var scrollcount = 0
// Scroll event listener
function scrollListener() {
setTimeout(function() {
scrollcount
if (scrollcount < 40) {
window.scrollTo(0, 0);
window.removeEventListener("scroll", scrollListener);
}
}, 1200);
});
window.addEventListener("scroll", scrollListener);
Комментарии:
1. Возможно, я неправильно понимаю, но не следует ли удалить прослушиватель в
else? В противном случае это будет выполняться только один раз, и всеscrollcountматериалы будут лишними.
Ответ №2:
Это приведет к переходу в начало страницы через 2 секунды после начала прокрутки пользователем:
/* Create a one-time event */
function onetime(node, type, callback) {
node.addEventListener(type, function(e) {
e.target.removeEventListener(e.type, arguments.callee);
return callback(e);
});
}
onetime(document, 'scroll', function(e) {
setTimeout(function(){ window.scrollTo(0, 0); }, 2000);
});
смотрите это в прямом эфире здесь
Если вы используете jQuery, вы можете использовать one функцию jQuery и упростить код до:
$(document).one('scroll', function(e) {
setTimeout(function(){ window.scrollTo(0, 0); }, 2000);
});
Если вы хотите перейти к началу страницы после завершения некоторых анимаций вместо ожидания заданного количества времени, то вам следует вызвать window.scrollTo(0, 0); после завершения анимации. Если вы анимируете с помощью функций эффектов jQuery, то вы можете передать функцию обратного вызова в качестве последнего аргумента, и она будет вызвана после завершения анимации. Например, вы можете сделать что-то вроде этого:
$(document).one('scroll', function(e) {
$('pre').animate(
{fontSize: "106px"},
2000,
function(){ window.scrollTo(0, 0); }
);
});