现在需要扩展下这个效果：在左边类目用鼠标中间滚动 select 各个类目的时候 div class=categories的 scroller不会随着一起滚动需要能伴随着slected 的类目的位置来同时滚动到适当位置。HTML结构是：div class=category-options-wrapper div class=categories h2类目h2 ul

// 针对左右两侧的.categories 时候的滚动代码

const categoryLists = document.querySelectorAll(".categories");

categoryLists.forEach((categoryList) => { let currentCategory = 0; const categories = categoryList.querySelectorAll("li"); const scroller = categoryList.querySelector(".scroller");

// 监听鼠标滚轮事件 categoryList.addEventListener("wheel", (event) => { event.preventDefault();

// 判断滚动方向
const direction = event.wheelDelta > 0 ? -1 : 1;

// 根据方向更新当前选中的类目
currentCategory = Math.max(
  0,
  Math.min(currentCategory + direction, categories.length - 1)
);

// 更新所有类目的样式
updateCategoryStyles();

// 计算滚动距离
const scrollTop = categories[currentCategory].offsetTop - scroller.offsetTop;

// 滚动到合适位置
scroller.scrollTo({
  top: scrollTop,
  behavior: "smooth"
});

});

// 监听li元素的点击事件 categories.forEach((category, index) => { category.addEventListener("click", () => { currentCategory = index; updateCategoryStyles();

  // 计算滚动距离
  const scrollTop = category.offsetTop - scroller.offsetTop;

  // 滚动到合适位置
  scroller.scrollTo({
    top: scrollTop,
    behavior: "smooth"
  });
});

});

// 更新所有类目的样式 function updateCategoryStyles() { categories.forEach((category, index) => { if (index === currentCategory) { category.classList.add("selected"); } else { category.classList.remove("selected"); } }); } })