CODEWITHSUNDEEP
javascript
turrican_34
turrican_34

Reputation: 769

Detecting click on window scrollbar

I'm trying to pause the main window scroll when scrolling a table, which I've done but are having trouble enabling the main window scroll again after.

This function will pause the main window scroll when scrolling over table.

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

The problem is that if I try to scroll down by clicking and dragging the main window scrollbar it's still jammed by scrollTo. I've tried doing an onclick event, but it doesn't work when clicking scrollbar.

  document.body.onclick = function(e) {

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

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

I've also tried removing the event listener, but can't figure out where to put it.

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

If I could just detect when a user clicks on the main window scroll eit would work as intended.

note: I have achieved pausing the main window scroll other ways, but they all have slight drawbacks.

Thanks

Upvotes: 3

Views: 2045

Answers (1)

Max Kur
Max Kur

Reputation: 46

I use this code. Works in 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();
  }
}

Upvotes: 1

Related Questions