javascript - 检测点击窗口滚动条

Question

我试图在滚动表格时暂停主窗口滚动，我已经这样做了，但之后再次启用主窗口滚动时遇到了问题。

此函数将在滚动表格时暂停主窗口滚动。

function preventWindowScroll() {

  scrollTable = document.querySelector(".members-data");

  if (scrollTable.contains(event.target)) {

var oldScrollPos = document.body.scrollTop;

window.onscroll = function () { window.scrollTo(0, oldScrollPos); };

  } else {
   // disable scrollTo in order to reenable main window pause
    window.onscroll = function () {};
  }
}

问题是，如果我尝试通过单击并拖动主窗口滚动条来向下滚动，它仍然会被 scrollTo 卡住。 我试过执行 onclick 事件，但在单击滚动条时它不起作用。

  document.body.onclick = function(e) {

  scrollTable = document.querySelector(".members-data");

  if (!scrollTable.contains(e.target)) {
   window.onscroll = function () {};
  }
};

我也试过删除事件监听器，但不知道该放在哪里。

 document.body.removeEventListener('mousewheel', preventWindowScroll);
 document.body.removeEventListener('DOMMouseScroll', preventWindowScroll);

如果我能够检测到用户何时单击主窗口滚动，它就会按预期工作。

注意:我已经通过其他方式实现了暂停主窗口滚动，但它们都有轻微的缺点。

谢谢

Answer 1

我使用这个代码。适用于 Chrome。

yourTable.addEventListener('wheel', handleMouseScroll);

function handleMouseScroll(e) {

  var delta = e.deltaY || e.detail || e.wheelDelta;

  if (delta < 0 && this.scrollTop == 0) {
    e.preventDefault();
  }
  if (delta > 0 && this.scrollHeight - this.clientHeight - this.scrollTop <= 1) {
    e.preventDefault();
  }
}