Ссылка Прокрутите вправо, чтобы прокрутить вниз
Я создал сайт с горизонтальной прокруткой. Одна проблема, с которой я сталкиваюсь, заключается в том, что страница работает только при прокрутке вниз, а пользователи постоянно пытаются прокручивать вправо. Интересно, есть ли специальный код для «связывания» поведения прокрутки вправо с прокруткой вниз?
Спасибо
Можете ли вы показать свой код, чтобы мы могли получить представление о макете вашей страницы? Это помогло бы в разработке решения.
Ответы 2
Вы можете присоединить метод window.scrollBy к функции, вызываемой событием onscroll.
В качестве альтернативы, если вы используете JQuery, есть плагин колесика мыши, который будет выполнять горизонтальную прокрутку. Инструкции по его настройке четко определены здесь.
Можете ли вы объяснить первый вариант? Я попробовал подключаемый модуль jquery, и он не работает должным образом.
Вот пример того, что предлагал Кайл Зольц:
var lastScrollTop = window.pageYOffset;
window.onscroll = function(e) {
var st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop){
document.body.scrollLeft = st;
console.info("right");
} else if (st < lastScrollTop) {
document.body.scrollLeft = st;
console.info("left");
}
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}
Сложно заставить вашу страницу прокручиваться влево и вправо именно так, как вы хотите, поэтому вам придется поэкспериментировать со строками document.body.scrollLeft = st;.
Вы также можете использовать .scrollBy({ left: 100, behavior: 'smooth' });, который менее дрожит, чем приведенный выше, но есть небольшая задержка из-за свойства «гладкость». например
var lastScrollTop = window.pageYOffset;
window.onscroll = function(e) {
var st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop){
document.body.scrollBy({ left: 100, behavior: 'smooth' });
console.info("right");
} else if (st < lastScrollTop) {
document.body.scrollBy({ left: -100, behavior: 'smooth' });
console.info("left");
}
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}
Вот как прокрутить вправо, чтобы вызвать событие прокрутки вниз:
var lastScrollX = window.pageXOffset;
window.onscroll = function(e) {
var st = window.pageXOffset || document.documentElement.scrollLeft;
if (st > lastScrollX){
document.body.scrollBy({ top: 100, left: 0, behavior: 'smooth' });
console.info("right");
} else if (st < lastScrollX) {
document.body.scrollBy({ top: -100, left: 0, behavior: 'smooth' });
console.info("left");
}
lastScrollX = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}
Привет! Мне удалось заставить консоль регистрировать влево и вправо, так что, похоже, она работает. Я думаю, что, возможно, испортил объяснение - вместо прокрутки вниз, чтобы прокрутить вправо, я пытаюсь сделать наоборот (где прокрутка вправо = прокрутка вниз).
Вы можете изменить этот код, чтобы вместо этого отслеживать pageXOffset и корректировать значение top в scrollBy вместо left. Однако, если вы в настоящее время не можете прокручивать вправо на своем сайте, вы столкнетесь с проблемой, когда событие прокрутки не запускает вашу функцию.
@ParkLewisSam Я обновил свой ответ внизу, чтобы включить обратное
Удивительный! Большое спасибо!
Кажется, что любой механизм, который заставляет прокрутку вниз привести к горизонтальной прокрутке, должен лежать в вашей кодовой базе, поэтому нельзя ли это изменить?