Jquery/JS:如何防止在父元素中滚动，而子元素是可滚动的(移动）

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

本文关键字：元素 滚动 移动 JS 何防止 Jquery      更新时间：2023-09-26

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

我写了以下代码，我不明白为什么错了

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

换句话说，如果正文具有"滑动菜单打开"类，并且目标的 id 不是"masc"，则阻止父项的滚动能力。

我确信 e.stopPropagation(( 可以解决问题，但显然它没有。

任何人？

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

答：
好吧，解决方案确实是添加overflow: hidden，问题是我一直在将css添加到正文，父文档或文档中，当我应该将其添加到" html"标签时。

谢谢你的帮助！

当主体具有类时，尝试在父元素上添加overflow:hidden sliding-menu-open 

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

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

您可以尝试在不希望

可重复的父元素上使用 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>

相关文章：