Прокрутка ссылки вправо для прокрутки вниз

#javascript #scroll #horizontal-scrolling

#javascript #прокрутите #горизонтальная прокрутка

Вопрос:

Я создал сайт с горизонтальной прокруткой. Одна из проблем, с которой я сталкиваюсь, заключается в том, что страница работает только при прокрутке вниз, а пользователи постоянно пытаются прокручивать вправо. Было интересно, есть ли пользовательский код для «привязки» поведения прокрутки вправо для прокрутки вниз.?

Спасибо

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

2. Можете ли вы показать свой код, чтобы мы могли получить представление о макете вашей страницы? Это помогло бы при разработке решения.

Ответ №1:

Вот пример того, что предлагал Кайл Зельц:

     var lastScrollTop = window.pageYOffset;

  window.onscroll = function(e) {
    var st = window.pageYOffset || document.documentElement.scrollTop; 
   if (st > lastScrollTop){
      document.body.scrollLeft = st;
      
      console.log("right");
   } else if (st < lastScrollTop) {
      document.body.scrollLeft = st;

      console.log("left");
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
  }

Сложно заставить вашу страницу прокручиваться влево и вправо именно так, как вы хотите, поэтому вам придется поэкспериментировать со document.body.scrollLeft = st; строками.
Вы также можете использовать .scrollBy({ left: 100, behavior: 'smooth' }); , который менее нервный, чем приведенный выше, но есть небольшая задержка из-за свойства ‘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.log("right");
   } else if (st < lastScrollTop) {
      document.body.scrollBy({ left: -100, behavior: 'smooth' });

      console.log("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.log("right");
   } else if (st < lastScrollX) {
      document.body.scrollBy({ top: -100, left: 0, behavior: 'smooth' });

      console.log("left");
   }
   lastScrollX = st <= 0 ? 0 : st; // For Mobile or negative scrolling
  }

1. Привет! Я смог заставить консоль регистрировать влево и вправо, так что, похоже, это работает. Я думаю, что, возможно, я ошибся в объяснении — вместо прокрутки вниз для прокрутки вправо я пытаюсь выполнить обратное (где прокрутка вправо = прокрутка вниз).

2. Вы могли бы настроить этот код, чтобы вместо этого отслеживать pageXOffset и корректировать top значение в scrollBy вместо left . Однако, если вы не можете в настоящее время прокручивать вправо на своем сайте, вы столкнетесь с проблемой события прокрутки, не запускающего вашу функцию

3. @ParkLewisSam Я обновил свой ответ внизу, чтобы включить обратное

4. Удивительно! Большое спасибо!

Ответ №2:

Вы можете изучить возможность присоединения метода window.scrollBy к функции, вызываемой событием onscroll.

В качестве альтернативы, если вы используете jQuery, есть плагин колеса мыши, который будет выполнять горизонтальную прокрутку. Инструкции по его настройке четко определены здесь.