使用jQuery / Javascript，如果存在某个元素，我将禁用body内的滚动。
虽然，这也禁用了页面上所有其他元素的滚动。
$("body").on('scroll touchmove mousewheel', function(e) {
if($("#myElem").length > 0) {
e.preventDefault();
e.stopPropagation();
return false;
}
});
我没有使用CSS的原因是因为md-backdrop元素是由我无法修改的第三方插件控制的。
如何才能禁用正文中的滚动，但允许在允许overflow scroll或auto的所有子元素中滚动？
通过以下示例，您可以看到正文和红色区域都是可滚动的。单击按钮并将myElem元素添加到页面之前，正文和红色区域都禁用了滚动。我要求禁用身体，尽管在这种情况下仍然会启用红色区域。
答案 0 :(得分：0)
阅读e.target以获取target的{{1}}元素并相应地应用条件。
specified-events$("body").on('scroll touchmove mousewheel', function(e) {
if ($("#myElem").length > 0 && (e.target.id !== 'myScroller')) {
e.preventDefault();
e.stopPropagation();
return false;
}
});
$("#myBtn").on("click", function() {
if ($("#myElem").length > 0) {
$("#myElem").remove();
} else if ($("#myElem").length === 0) {
$("body").prepend("<div id='myElem'>This element disables all scrolling since it exists</div>");
}
});body {
height: 1000px;
background-color: green;
}
#myElem {
background-color: black;
color: white;
}
#myScroller {
height: 300px;
overflow-y: scroll;
background-color: red;
color: white;
}
修改：处理<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Click the below button to toggle the element that is appended to the body. While scrolling, it will check if that element exists. If it exists, scrolling on the body and within the read area is disabled. Need the body disabled, although red area enabled.
<br />
<br />
<button id="myBtn">
Toggle element
</button>
<div id="myScroller">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut viverra diam. Aenean semper mauris vitae libero tempor, tempus mattis turpis imperdiet. Donec a tellus ut elit commodo convallis. Suspendisse eu egestas magna. Sed turpis dolor, lacinia
quis orci sit amet, efficitur pulvinar dui. Sed quis metus turpis. Praesent non venenatis sem. Vestibulum tristique sagittis dignissim. In aliquam est vel nunc luctus, vel cursus dolor eleifend. Pellentesque facilisis tempor dui sed viverra. Mauris
sed viverra libero. Suspendisse nisl mauris, cursus id purus non, iaculis lobortis neque. Duis sed tempor mauris, in dictum lorem. Nunc orci elit, rutrum eu est porttitor, pretium iaculis odio. Aenean eu velit posuere, maximus risus at, egestas mauris.
Nullam at diam diam. Suspendisse vel dui dignissim, laoreet nibh ut, iaculis elit. Quisque eu convallis dui. Quisque cursus, urna vitae mattis consequat, urna orci consectetur urna, commodo malesuada lacus urna eu nunc. Nunc in nunc at leo molestie
aliquam. Nunc interdum sollicitudin rutrum. Nam molestie pulvinar ullamcorper. Sed blandit vestibulum porta. Curabitur semper eu ipsum eu commodo. Nunc faucibus ac orci quis ornare. Morbi ornare leo in mi sodales, eget iaculis enim viverra. Nunc at
ligula tortor. Aenean condimentum a tellus quis congue. Nulla eu hendrerit erat. Donec egestas arcu lacinia mattis mollis. Mauris quis maximus eros. Donec ut risus ultricies, sollicitudin lacus sit amet, aliquet nisi. Aenean pellentesque velit justo,
a eleifend quam consectetur blandit. Praesent quis magna sit amet nibh luctus congue sed lobortis sem. Sed ut aliquet diam. Vestibulum pharetra ex ac lectus iaculis, eu aliquet erat placerat. Donec rutrum lobortis tellus, eu efficitur nibh vulputate
eu. Curabitur placerat id quam vel egestas. Proin consectetur sollicitudin lorem. Integer sollicitudin at quam vel sagittis. Integer sed pretium quam, vitae convallis leo. Suspendisse lorem nulla, imperdiet nec cursus id, auctor quis ante. Integer mollis
vel neque sed commodo. Quisque venenatis nulla quis aliquet porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed lobortis euismod est sed sagittis. Ut aliquet a tortor id rhoncus. Sed commodo risus
cursus, dignissim nulla vel, molestie ipsum. Cras ac ante luctus diam rutrum placerat eu et risus. Pellentesque sed mauris fringilla nulla imperdiet facilisis a eu leo. Vivamus sollicitudin nibh ac augue ultrices, ut bibendum metus viverra. Donec lectus
urna, lacinia eu bibendum sed, convallis sed ex. Mauris commodo neque sed sollicitudin pharetra. Aenean ac risus ligula. Nunc congue ultrices volutpat. Aenean ac enim porttitor, hendrerit mauris at, ultrices quam. Mauris euismod commodo purus, egestas
semper metus aliquet ac. Quisque nec consectetur sapien. In vestibulum, urna sed lobortis sagittis, sapien ex interdum nisl, id varius orci dolor sit amet dolor. Nunc quis lobortis velit. Praesent viverra eros at nulla pulvinar accumsan. Nulla interdum
urna odio, vel ultricies ante fermentum tincidunt. Sed in nibh quam. Phasellus maximus metus diam, ac vulputate enim fermentum ac. Vestibulum bibendum elit justo, at semper risus consequat ut. Pellentesque facilisis mi et vulputate feugiat. Suspendisse
egestas mauris at elit ullamcorper, non aliquet elit fermentum.
</div>元素的overflow属性也会有所帮助！
body$("#myBtn").on("click", function() {
$('body').toggleClass('hideIt');
});body {
height: 1000px;
background-color: green;
}
#myElem {
background-color: black;
color: white;
}
#myScroller {
height: 300px;
overflow-y: scroll;
background-color: red;
color: white;
}
body.hideIt {
overflow: hidden;
}
答案 1 :(得分：0)
最简单的方法是在检测到滚动事件时将父{的scrollTop()设置为零。
请参阅下面的工作示例。
$(function () {
//fill up show data
var str = "";
for(var i = 0; i < 50; i++) {
str += i + "\n";
}
$(".grandchild pre").text(str);
console.log("started");
//fixed scrolling on parent
$(".parent").on("scroll touchmove mousewheel", function(e) {
console.log('moved ' + $(this).attr('class'));
$(this).scrollTop(0);
}).click(function () {
alert('clicked');
});
});.parent, .child, .grandchild {
padding : 5px;
overflow: auto;
}
.parent {
border: 1px solid red;
height: 200px;
}
.child {
border: 1px solid green;
height: 400px;
}
.grandchild {
border: 1px solid blue;
height: 800px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
parent
<div class='child'>
child
<div class='grandchild'>
grandchild
<pre></pre>
</div>
</div>
</div>