CODEWITHSUNDEEP
javascriptjquery
Tales
Tales

Reputation: 303

How to avoid a specific element scroll from getting disabled?

On ipad pro I am trying to disable scroll if popup open and enable the scroll back if popup gets close. I have found a solution which works perfectly but it blocks inner element scroll too.

function preventDefault(e){
  e.preventDefault();
}
function disableScroll() {
  document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll() {
  document.body.removeEventListener('touchmove', preventDefault);
}

Here, I have an element inside popup which is scrollable and has class name window-content. The above solution blocks the scroll for the entire page means it also blocks the scroll for the inner content of popup. I have tried below code to allow scrolling inside pop but it did not worked.

function disableScroll() {
  document.body.addEventListener('touchmove', preventDefault, { passive: false });
  document.getElementsByClassName('window')[0].getElementsByClassName('window-content')[0].removeEventListener('touchmove', preventDefault);
}

I want to allow scroll inside popup and it should only disable for body. Thank you.

Upvotes: 0

Views: 53

Answers (1)

Tales
Tales

Reputation: 303

I have changed the preventDefault function to avoid the particular element.

preventDefault: function(e) {
    if($(e.target).closest(".k-window").length == 0) {
        e.preventDefault();
    }
},

It is fixed now.

Upvotes: 1

Related Questions