这可能是一个与`scrollBy`、`scroll-snap`和`scroll-behavior`相关的bug。在滚动、分段滚动（scroll-snap）和滚动行为设置中出现问题的错误。

Question

我正在尝试将页面的垂直滚动绑定到水平滚动，并且利用滚动捕捉（scroll-snapping）和流畅滚动效果，使得用户能够滚动到下一个或上一个“页面”。

请观看视频以了解脚本运行时出现的异常行为及其与样式表的交互方式。您可以通过CodePen重现这个bug，但我目前不确定是什么导致了这种故障现象。我在代码中添加了一个400毫秒的延迟，目的是防止用户不小心同时触发两个方向的滚动。

预期目标是让用户只有在当前元素完全显示后才能滚动到下一个元素。

当关闭滚动捕捉功能时，scrollBy 函数无法正常工作，只能使页面稍微移动一点（而不是按照预期滚动整个窗口宽度）。

以下是JavaScript代码段：

// 初始化等待标志变量
var waiting;
if (waiting == null) {
  waiting = 0;
}

document.querySelector(".main-nav").addEventListener("wheel", (event) => {
  event.preventDefault();
  
  // 如果等待标志为0，则开始处理滚动事件
  if (waiting === 0) {
    waiting = 1;
    console.log("started wait");
    
    // 根据鼠标滚轮的方向进行相应的水平滚动
    if (event.deltaY > 0) {
      scrlFF();
      setTimeout(finishedWaiting, 400);
    } else if (event.deltaY < 0) {
      scrlFR();
      setTimeout(finishedWaiting, 400);
    }
  }
});

function finishedWaiting() {
  console.log("finished wait");
  waiting = 0;
}

// 向前滚动一页
function scrlFF() {
  document.querySelector(".main-nav").scrollBy({ left: window.innerWidth, behavior: 'smooth' });
}

// 向后滚动一页
function scrlFR() {
  document.querySelector(".main-nav").scrollBy({ left: -window.innerWidth, behavior: 'smooth' });
}

以及相关的CSS样式：

.a {
  background: red;
  min-width: 100vw;
  height: 100vh;
  display: flex;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.a ~ .a {
  background: blue;
}

/* 更多颜色交替的 ".a" 元素样式... */

/* 隐藏垂直滚动条 */
* { overflow-y: hidden; }

.main-nav {
  display: flex;
  flex-direction: row;
  height: 100%;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  scroll-behavior: smooth;
  scrollbar-width: none;
  width: inherit;
}

HTML结构：

Blorgbeard · Answer

尽管在Stack Overflow上将“html, body”添加到querySelector中用于事件监听的代码片段运行正常，但在CodePen或我的网站上相同的代码却没有按预期工作？

// 定义一个变量用来判断是否处于等待状态
var waiting;

if (waiting == null) {
    waiting = 0; // 若未初始化，则设置为0
}

// 尝试同时为html、body以及.main-nav元素添加鼠标滚轮滚动事件监听器
document.querySelector("html, body, .main-nav").addEventListener("wheel", (event) => {
    event.preventDefault(); // 阻止默认的滚轮滚动行为
                   
    if (waiting === 0) {
        waiting = 1; // 设置等待标志为1，表示正在处理滚动事件
        if (event.deltaY > 0) {
            scrlFF(); // 如果滚轮向下滚动，则向右平滑滚动
            setTimeout(finishedWaiting, 400); // 400毫秒后重置等待标志
        } else if (event.deltaY < 0) {                         
            scrlFR(); // 如果滚轮向上滚动，则向左平滑滚动
            setTimeout(finishedWaiting, 400); // 400毫秒后重置等待标志
        } 
    }
});

// 函数用于重置等待状态
function finishedWaiting() {
    waiting = 0;
}

// 向右滚动函数
function scrlFF() {
    document.querySelector(".main-nav").scrollBy({ left: window.innerWidth, behavior: 'smooth' });
}

// 向左滚动函数
function scrlFR() {
    document.querySelector(".main-nav").scrollBy({ left: -window.innerWidth, behavior: 'smooth' });
}

这段JavaScript代码与以下CSS和HTML结合使用，旨在实现当用户在.main-nav容器上滚动鼠标滚轮时，以平滑滚动的方式切换导航条中的元素。它还包含一个简单的等待机制，确保在滚动动画进行时不会连续触发新的滚动。

/* CSS样式 */
.a {
    background: red;
    min-width: 100vw;
    height: 100vh;
    display: flex;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}
.a ~ .a {
    background: blue;
}
.a ~ .a ~ .a {
    background: red;
}
.a ~ .a ~ .a ~ .a {
    background: blue;
}
* {
    overflow-y: hidden; /* 隐藏垂直滚动条 */
}
.main-nav {
    display: flex;
    flex-direction: row;
    height: 100%;
    scroll-snap-type: x mandatory; /* 横向强制滚动对齐 */
    overflow-x: scroll;
    scroll-behavior: smooth; /* 滚动效果平滑 */
    scrollbar-width: none; /* 隐藏滚动条 */
    width: inherit;
}

dbc · Answer

这个问题尚未标记为已解决，因为我仍然不清楚造成问题的具体原因。
然而，我已经找到了一个适用于CodePen和我的网站的虽然不够理想但能工作的解决方案。

CSS部分：

.main-nav { pointer-events: var(--handlePointer); }

JavaScript部分：

function finishedWaiting() {
  console.log("finished wait");
  document.querySelector(':root').style.setProperty('--handlePointer', "all");
  waiting = 0;
}

function scrlFF() {
  document.querySelector(':root').style.setProperty('--handlePointer', "none");
  document.querySelector('.main-nav').scrollBy({ left: window.innerWidth, behavior: 'smooth' });
}

function scrlFR() {
  document.querySelector(':root').style.setProperty('--handlePointer', "none");
  document.querySelector('.main-nav').scrollBy({ left: -window.innerWidth, behavior: 'smooth' });
}

出于某种原因，在滚动过程中添加pointer-events: none;解决了页面卡顿的问题。我在函数中加入了一个CSS变量来控制.main-nav元素的pointer-events属性，以便在延迟结束之后恢复到pointer-events: all;。

当你悬停在.main-nav内的子元素.a（或其他任何子元素）上时，滚动功能无法正常工作。除非pointer-events属性设为none，否则滚动不会顺畅地滚动到下一个位置，会表现出如https://i.gyazo.com/2ec23e2b7c281d26e1e9436d59eec97d.mp4" rel="nofollow noreferrer">视频所示的卡顿现象。

如果有谁能解释到底发生了什么情况，我会非常感谢任何建议。

rici · Answer

鼠标滚轮与页面滚动通常是一个挑战。下面的代码是对原有方案的一个改进版本，旨在使滚动更加流畅。虽然并非完美无缺，但在快速上/下滚动滚轮时可能会有些许异常表现。

以下是改动和优化点：

使用更简洁的CSS来区分奇偶颜色背景，这样无论有多少个元素，都不必更改CSS。
添加一个data属性并在CSS中针对该属性设置指针事件，通过简单地将其值设为true/false来控制。这样设置属性值可能减少了DOM操作，同时也简化了编码过程。
对窗口添加一个小型的“wheel”事件监听器，以略微平滑滚动效果。这是滚动卡顿的一部分，因此我们阻止了默认的滚动行为。
添加了一些小逻辑来检测滚动开始和结束，以便在滚动开始和结束时开启相应的控制。
取消使用setTimeout，改用事件驱动——关键在于利用“scrollend”事件来切换数据属性的状态。
通过一个名为scrollContainer(main, plus)的函数精简代码，替代原本的两个函数；只需传递一个布尔值来决定向左还是向右滚动。
移除全局变量，改为将滚动开关状态存储在data属性中；可以直接将“main”容器传递给滚动函数。
大多数let声明可能可以替换为const声明，但这留作进一步优化的任务。

以下是优化后的代码段示例及其对应的CSS和HTML：

JavaScript代码:

// 平滑处理快速滚轮上/下滚动
window.addEventListener("wheel", e => e.preventDefault(), {
  passive: false
});

let main = document.querySelector(".main-nav");

main.addEventListener("wheel", (event) => {
  event.preventDefault();
  let container = event.currentTarget;
  let canScroll = container.dataset.canscroll === "true";
  if (!canScroll) {
    return false;
  }
  let totalWidth = container.scrollWidth - container.clientWidth;
  let currentScrollLeft = Math.trunc(container.scrollLeft);
  let wheelDelta = event.wheelDelta;
  scrollContainer(container, wheelDelta < 0);
  
  if (currentScrollLeft === 0 || currentScrollLeft === totalWidth) {
    container.dataset.canscroll = "true";
  }
}, {
  passive: true
});

main.addEventListener("scrollend", (event) => {
  event.currentTarget.dataset.canscroll = "true";
});

main.addEventListener("scroll", (event) => {
  // 当滚动时频繁触发
  let canScroll = event.currentTarget.dataset.canscroll === "true";
  if (canScroll) {
    return false;
  }
});

function scrollContainer(main, moveRight) {
  main.dataset.canscroll = "false";
  let scrollAmount = moveRight ? main.clientWidth : -main.clientWidth;
  main.scrollBy({
    left: scrollAmount,
    behavior: 'smooth'
  });
}

CSS样式：

* {
  overflow-y: hidden;
  box-sizing: border-box;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

/* 隐藏滚动条 */
.main-nav {
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Webkit 浏览器内核隐藏滚动条 */
.main-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.main-nav {
  display: flex;
  flex-direction: row;
  height: 100vh;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  scroll-behavior: smooth;
  width: inherit;
}

/* 根据data-canscroll属性值切换指针事件 */
.main-nav[data-canscroll="true"] {
  pointer-events: auto;
}

.main-nav[data-canscroll="false"] {
  pointer-events: none;
}

.a {
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid yellow;
}

/* 奇偶元素交替背景色 */
.a:nth-child(even) {
  background: blue;
}

.a:nth-child(odd) {
  background: red;
}

.a {
  min-width: 100%;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  color: white;
  font-size: 3em;
}

.scrollR {/* 这个类在HTML中未使用，可能是预留的 */}
{
  padding: 1em;
}

HTML结构：


  第一个
  第二个
  第三个
  第四个
  第五个
  第六个
  最后一个