如何检测div水平滚动100px后为子元素添加class，代码不生效如何解决？

存在的问题 #

• 错误使用scrollLeft方法：scrollLeft(100)是赋值操作，作用是将目标元素的水平滚动距离设置为100px，返回值是jQuery对象，所以if判断条件永远为真，完全没有读取当前滚动距离的逻辑。要获取当前滚动距离需要使用无参调用scrollLeft()，返回值是当前水平滚动的像素数值。
• 没有绑定滚动事件：你当前的代码只会在页面加载时执行1次，后续用户滚动元素时不会重新触发判断，无法实现「实时检测」的需求。
• 缺少状态回退逻辑（可选优化）：现有逻辑仅会添加active类，当滚动距离回到100px以内时不会自动移除类，不符合大部分交互场景的需求。

修正后的实现代码 #

// 给可滚动元素绑定scroll事件，滚动时自动触发判断
$("section.flow .right").on("scroll", function() {
  // 获取当前水平滚动距离
  const currentScroll = $(this).scrollLeft();
  if (currentScroll >= 100) {
    $("section.flow li").addClass("active");
  } else {
    // 不需要回退效果可以删掉else分支
    $("section.flow li").removeClass("active");
  }
})

// 可选：页面加载后立即触发一次判断，避免初始滚动距离已经满足条件时不生效
$("section.flow .right").trigger("scroll");

内容的提问来源于stack exchange，提问作者Fernando Souza