如何在允許子級滾動的同時以編程方式禁用滾動？

Question

使用jQuery / Javascript，如果存在某個元素，我將禁止在body內滾動。

雖然，這也會禁用頁面上所有其他元素的滾動。

$("body").on('scroll touchmove mousewheel', function(e) {
    if($("#myElem").length > 0) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
});

我之所以沒有CSS的原因是因為md-backdrop元素由我無法修改的第三方插件控制。

如何僅禁用正文中的滾動，而又允許我所有允許scroll或auto overflow的子元素中的scroll ？

在下面的示例中，您可以看到正文和紅色區域都是可滾動的。 單擊該按鈕並將myElem元素添加到頁面之前，正文和紅色區域均已禁用滾動。 我需要禁用主體，盡管在這種情況下仍要啟用紅色區域。

工作實例

Answer 1

閱讀e.target以獲取specified-events的target元素，並相應地應用條件。

 $("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> 

編輯：處理body元素的overflow屬性也將有所幫助！

 $("#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; } 

 <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> 

Answer 2

最簡單的方法是在檢測到滾動事件時將parent的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>