Hike Nalbandyan February 2016

Jquery/JS : How to prevent scrolling in parent element while the child is scrollable (mobile)?

I need to enable scrolling in a child element and disable it for parent elements. By default when the child scrolling is over the parent starts to scroll, I wish to prevent this default.

I wrote the following code and I don't understand why is it wrong

document.body.addEventListener('touchmove', function(e){
    if (body.hasClass('sliding-menu-open')) {
        if (e.target.id == 'masc') {
            e.preventDefault();
        }
        else{
            e.stopPropagation();
        }
    }
});

In other words, if the body has 'sliding-menu-open' class and the target's id is not 'masc', then prevent the scrolling ability of parents.

I was sure that e.stopPropagation() will do the trick, but obviously it doesn't.

Anyone?

EDIT: I've created a new sidebar for my website, it is fixed to the top right. It has a lot of content, therefore I need it to be scrollable. BUT when the sidebar is open I want to prevent the content of the page itself to scroll.
I hope now it's clear enough for you understand the problem.

ANSWER:
Well the solution really was adding overflow: hidden, the problem was that I have been adding the css to the body, parent or document, when I should add it to the 'html' tag.

Thank's for the help!

Answers


Dogoku February 2016

Try adding overflow:hidden on the parent element when the body has the class sliding-menu-open

.sliding-menu-open .parent {
    overflow:hidden;
}

If you need more help, please provide an example of the html structure or an example jsfiddle


Haeresis February 2016

You could try to use the overflow: hidden property on a the parent element you don't want to be scrolable:

var body = document.getElementsByTagName("body")[0],
    myCurrentElement = document.getElementsByClassName("sliding-menu-open")[0];

myCurrentElement.addEventListener("touchstart", function () {
    body.style.overflow = "hidden";
});

myCurrentElement.addEventListener("touchend", function () {
    body.style.overflow = "";
});

You could also add a class that contain the overflow: hidden property (and remove it) and other cool stuff.

.with-touched-child {
    overflow:hidden;
}

and JS

var body = document.getElementsByTagName("body")[0],
    myCurrentElement = document.getElementsByClassName("sliding-menu-open")[0];

myCurrentElement.addEventListener("touchstart", function () {
    body.classList.add("with-touched-child");
});

myCurrentElement.addEventListener("touchend", function () {
    body.classList.remove("with-touched-child");
});

e.i.

var container = document.getElementsByClassName("container")[0],
    menu = document.getElementsByClassName("menu")[0];

menu.addEventListener("touchstart", function () {
    container.classList.add("with-touched-child");
});

menu.addEventListener("touchend", function () {
    container.classList.remove("with-touched-child");
});
body {
    overflow-y: hidden;
}
.container {
    margin-top: 50px;
    height: 150px;
    overflow-y: scroll;
    background-color: #f00;
}
.menu {
    height: 100px;
    overflow-y: scroll;
    background-color: #0f0;
}
.with-touched-child {
    overflow-y: hidden;
}
.with-touched-child .menu {
    wi 

Post Status

Asked in February 2016
Viewed 3,876 times
Voted 6
Answered 2 times

Search




Leave an answer