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

Question

编辑：我已经解决了，感谢您的阅读。

问题是我的变量：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.
    
    }

我不确定为什么它不起作用。我测试了将 console.log(myList[y]) 添加到每个事件侦听器，他们能够记录所有事件的正确元素。但是他们只是不会滚动。

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

标签： javascript

Answer 1

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

let myList = document.querySelectorAll('.scroll')


let isDown = [];
let startX = [];
let scrollLeft = [];

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