为多个元素添加鼠标抓取滚动，javascript

编辑：我已经解决了，谢谢你的阅读

问题是我的变量isDown、startX、scrollleft是用'let'声明的，它们在onload（）函数中。我把变量移到函数外，它就工作了

“好的，好的，好的”

我有一个水平滚动的div。出于美观的目的，我删除了滚动条，希望人们用鼠标抓取滚动条。我复制了以下代码：

const slider = document.querySelector(".scroll");
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener("mousedown", e => {
  isDown = true;
  slider.classList.add("active");
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});
slider.addEventListener("mouseleave", () => {
  isDown = false;
  slider.classList.remove("active");
});
slider.addEventListener("mouseup", () => {
  isDown = false;
  slider.classList.remove("active");
});
slider.addEventListener("mousemove", e => {
  if (!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = x - startX;
  slider.scrollLeft = scrollLeft - walk;
});

我的问题是如何将其添加到多个元素中？我总共有四个相同设计的不同盒子，我想通过抓取来滚动它们。我可以通过复制粘贴上述代码四次来实现这一点，但这并不理想。我尝试进行如下修改：

// basically code on top with modifications

    let isDown = false;
    let startX;
    let scrollLeft;
    
    let myList = document.getElementsByClassName('scroll') // four elements in this collection
    
    for (let y = 0; y < myList.length; y++) {
    
        // bascially all the addeventlisteners as on top, but I change the
        // 'slider' to myList[y] instead.
    
    }

//基本上是在上面编写代码并进行修改
让isDown=false；
让startX；
让我们离开；
让myList=document.GetElementsByCassName（'scroll'）//此集合中的四个元素
for（设y=0；y

我不知道为什么它不起作用。我测试了向每个事件侦听器添加console.log（myList[y]），他们能够在所有事件上记录正确的元素。然而，它们不会滚动

---

如何在不复制粘贴代码四次的情况下向所有四个元素添加滚动条？

您可以将for loop更改为foreach 试试这个

let myList=document.querySelectorAll（'.scroll'））
设isDown=[]；
设startX=[]；
让scrollLeft=[]；
myList.forEach（（滑块，i）=>{
slider.addEventListener（“鼠标向下”，e=>{
isDown[i]=真；
slider.classList.add（“活动”）；
startX[i]=e.pageX-slider.offsetLeft；
scrollLeft[i]=slider.scrollLeft；
});
slider.addEventListener（“mouseleave”，（）=>{
isDown[i]=假；
slider.classList.remove（“活动”）；
});
slider.addEventListener（“mouseup”，（）=>{
isDown[i]=假；
slider.classList.remove（“活动”）；
});
slider.addEventListener（“mousemove”，e=>{
如果（！isDown[i]）返回；
e、 预防默认值（）；
const x=e.pageX-slider.offsetLeft；
常数步=x-星tx[i]；
slider.scrollLeft=scrollLeft[i]-漫游；
});
})