链接向右滚动以向下滚动

Question

我创建了一个水平滚动网站。我遇到的一个问题是页面只能向下滚动，而用户总是试图向右滚动。想知道是否有自定义代码“link”向下滚动向右滚动的行为。？

谢谢

Answer 1

您可以考虑附加 window.scrollBy method to a function called by the onscroll 事件。

或者，如果您使用的是 JQuery，则有一个鼠标滚轮插件可以执行水平滚动。设置说明定义明确 here.

Answer 2

以下是 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' }); ，它比上面的抖动少，但是由于 '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
  }

链接向右滚动以向下滚动

Linking Scroll right to scroll down

javascript

scroll

horizontal-scrolling