Question

尝试构建一个滚动条，当您单击并按住鼠标按钮并开始沿Y轴移动时，它将以一定的灵敏度向上或向下移动网站。一切工作正常，滚动顺畅，完全符合我的要求。问题是，当您停止按住鼠标按钮时，它仍会随着鼠标移动上下移动网站。

我的代码

scrollbar.addEventListener("mousedown", scrollWhenMove);
body.addEventListener("mouseup", stopScroll);
function scrollWhenMove()
{
    scrollbar.addEventListener("mousemove", function() {onmove(event)})
    function onmove(event)
    {
        var moved = event.movementY;
        if(moved !== 0)
        {
            document.documentElement.scrollTop += (moved * 3);
        }
    }
}
function stopScroll()
{
        document.documentElement.scrollTop = 0;
        return false;
}

有解决方案吗？

Answer 1

在调用removeEventListener时，您可以使用stopScroll停止收听鼠标的移动。

但是，请注意，只有将与上一个addEventListener中传递的函数相同的引用传递给它时，该函数才起作用：

// 2 different anonymous functions won't work
scrollbar.addEventListener("mousemove", function() { onmove(); });
scrollbar.removeEventListener("mousemove", function() { onmove(); });

// OK, same reference
scrollbar.addEventListener("mousemove", onmove);
scrollbar.removeEventListener("mousemove", onmove);

演示：

scrollbar.addEventListener("mousedown", scrollWhenMove);
document.body.addEventListener("mouseup", stopScroll);

function scrollWhenMove() {
  scrollbar.addEventListener("mousemove", onmove);
}

function stopScroll() {
  scrollbar.removeEventListener("mousemove", onmove);
}

function onmove(event) {
  var moved = event.movementY;
  if (moved !== 0) {
    document.documentElement.scrollTop += (moved * 3);
  }
}

img {
  display: block;
  max-width: 90%;
}

#scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  width: 50px;
  height: 100%;
  background: #f00;
}

<img src="https://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg">

<div id="scrollbar"></div>

MouseDown事件没有运行MouseUp事件

1 个答案: