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);

如果我能够检测到用户点击主窗口的时间，那么滚动eit将按预期工作。

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

由于

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();
  }
}

检测单击窗口滚动条

1 个答案: