html 滚轮点击,js如何响应滚动条的点击事件？

Document

.wrap {

height: 500px;

width: 300px;

overflow: auto;

}

.content {

height: 5000px;

width: 1000px;

}

1

document.addEventListener("click", () => {

alert("click");

});

// 能否绑定document上任意的scroll

document

.getElementsByClassName("wrap")[0]

.addEventListener("scroll", () => {

console.log("scroll");

});

有这么一段html,我想在用户点击滚动条时进行监测，该如果实现？

直接在document上绑定click事件可以相应所有的元素(除了滚动条)。

转换为监听滚动：

但是如果直接在document绑定scroll，那么滚动.wrap元素时就无法响应。

如果界面上有很多元素，我只想监听滚动条滚动时的事件，需要每个都进行绑定吗？