链接向右滚动向下滚动答案

【问题标题】：Linking Scroll right to scroll down链接向右滚动向下滚动
【发布时间】：2023-03-08 13:55:01
【问题描述】：

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

谢谢

【问题讨论】：

似乎任何导致向下滚动导致水平滚动的机制都必须存在于您的代码库中，所以这不能改变吗？
您能否展示您的代码，以便我们了解您的页面布局？这将有助于设计解决方案。

标签： javascript scroll horizontal-scrolling

【解决方案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' });，它比上面的更不紧张，但由于'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
  }

【讨论】：

嘿！我能够让控制台记录左右，所以它似乎确实在工作。我想我可能搞砸了解释 - 而不是向下滚动到向右滚动，我正在尝试相反（向右滚动=向下滚动）。
您可以调整此代码以跟踪pageXOffset 并调整scrollBy 中的top 值而不是left。但是，如果您当前无法在您的网站上向右滚动，您将遇到滚动事件未触发您的功能的问题
@ParkLewisSam 我在底部更新了我的答案以包含逆
太棒了！非常感谢！

【解决方案2】：

您可以考虑将window.scrollBy 方法附加到onscroll 事件调用的函数。

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

【讨论】：

你能解释一下第一个选项吗？ jquery插件我试过了，不正常