Question

我需要在子元素中启用滚动并为父元素禁用它。默认情况下，当子滚动结束时，父滚动开始滚动，我希望阻止此默认值。

我写了下面的代码，我不明白为什么是错的

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

换句话说，如果正文具有'slide-menu-open'类且目标的id不是'masc'，则阻止父母的滚动能力。

我确信e.stopPropagation（）会做到这一点，但很明显它没有。

任何？

编辑：我为我的网站创建了一个新的侧边栏，它固定在右上角。它有很多内容，因此我需要它可以滚动。但是当侧边栏打开时，我想阻止页面本身的内容滚动我希望现在很清楚你能理解这个问题。

解答：
那么解决方案真的是添加overflow: hidden，问题是当我将css添加到'html'标签时，我已经将css添加到正文，父级或文档中。

感谢您的帮助！

Answer 1

当正文具有类overflow:hidden

时，尝试在父元素上添加sliding-menu-open

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

如果您需要更多帮助，请提供html结构示例或示例jsfiddle

Answer 2

您可以尝试在不希望被scrolable的父元素上使用overflow: hidden属性：

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 = "";
});

您还可以添加一个包含overflow: hidden属性（并删除它）的类以及其他很酷的东西。

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

和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 {
    width: 100%;
}

<div class="container">
    <ul>
        <li>Touch and Scroll Me</li>
        <li>Touch and Scroll Me</li>
        <li>Touch and Scroll Me</li>
        <li>Touch and Scroll Me</li>
        <li>Touch and Scroll Me</li>
        <li>Touch and Scroll Me</li>
    </ul>
    <div class="menu">
        <ul>
            <li>Touch, Scroll and no Overflow !</li>
            <li>Touch, Scroll and no Overflow !</li>
            <li>Touch, Scroll and no Overflow !</li>
            <li>Touch, Scroll and no Overflow !</li>
            <li>Touch, Scroll and no Overflow !</li>
            <li>Touch and Scroll Me</li>
        </ul>
    </div>
</div>

Jquery / JS：如何在子项可滚动（移动）时阻止父元素中的滚动？

2 个答案: