javascript - 链接向右滚动向下滚动

Question

我创建了一个水平滚动站点。我遇到的一个问题是页面只能向下滚动，而用户一直在尝试向右滚动。想知道是否有自定义代码可以“链接”向右滚动的行为以向下滚动。？
谢谢

Answer 1

以下是 Kyle Soeltz 建议的示例:

    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' });这比上面的更不紧张，但由于“平滑”属性，延迟很小。例如

    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
  }