如何实现横向滚动时页面背景色切换，解决现有代码失效问题

问题根因 #

• 滚动监听对象错误：当前布局下实际产生滚动行为的是.main-wrap容器，而非整个document文档，原有绑定在$(document)上的scroll事件无法触发。
• 你通过旋转实现的伪横向滚动，本质上是.main-wrap的垂直滚动映射为视觉上的横向滚动，所以scrollTop的数值和视觉上的横向滚动距离是对应的，不需要替换为scrollLeft，只要调整获取值的容器即可。

修复代码 #

直接替换原有JS代码即可生效：

$(document).ready(function() {
  // 绑定滚动事件到实际产生滚动的容器
  $(".main-wrap").scroll(function() {
    const scroll_pos = $(this).scrollTop();
    if (scroll_pos > 500) {
      $("body").css('background-color', 'red');
    } else {
      $("body").css('background-color', 'black');
    }
  });
});

多分段判断参考 #

如果需要添加多段背景色切换规则，按区间优先级从高到低判断即可，不会出现报错：

$(document).ready(function() {
  $(".main-wrap").scroll(function() {
    const scroll_pos = $(this).scrollTop();
    let bgColor = 'black'; // 首屏默认背景色
    if (scroll_pos > 1500) {
      bgColor = 'green'; // 第三段对应背景色
    } else if (scroll_pos > 700) {
      bgColor = 'red'; // 第二段对应背景色
    }
    $("body").css('background-color', bgColor);
  });
});

内容的提问来源于stack exchange，提问作者ZUH.