在控制台中解决警告时滚动DIV时阻止页面滚动
起初这似乎是在这里回答的重复问题，但还有更多需要弄清楚。
如何在谷歌Chrome控制台中给出[Violation]警告以下解决方法？
[违规]为滚动阻止“鼠标滚轮”事件添加了非被动事件监听器。 考虑将事件处理程序标记为“被动”以使页面更具响应性。
这是有效的代码片段，但带有上述[Violation]警告。
$.fn.isolatedScroll = function() { this.on('mousewheel DOMMouseScroll', function (e) { let delta = e.wheelDelta || (e.originalEvent && e.originalEvent.wheelDelta) || -e.detail, bottomOverflow = this.scrollTop + $(this).outerHeight() - this.scrollHeight >= 0, topOverflow = this.scrollTop <= 0; if ((delta 0 && topOverflow)) { e.preventDefault(); } }); return this; }; $('.js-isolated-scroll').isolatedScroll() // Nothing to check here as it's just repeating tags function multiplyNode(node, count, deep) { for (var i = 0, copy; i < count - 1; i++) { copy = node.cloneNode(deep); node.parentNode.insertBefore(copy, node); } } multiplyNode(document.querySelector('.p-in-fixed'), 20, true); multiplyNode(document.querySelector('.p-in-body'), 20, true);
body{ position: relative; background-color: #ccc !important; padding: 20px 20px 20px 50%; } .fixed { top: 20px; left: 20px; right: 20px; bottom: 20px; padding: 20px; overflow: auto; position: fixed; border: 1px solid #333; width: calc(50% - 40px); background-color: #f8f8f8; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates.
以下是我尝试使用Modernizr的passiveeventlisteners使用此代码Modernizr.passiveeventlisteners ? {passive:true} : false来修复它的方法Modernizr.passiveeventlisteners ? {passive:true} : false Modernizr.passiveeventlisteners ? {passive:true} : false同时按照此处给出的答案。 但是我在控制台中收到此错误消息：
无法阻止被动事件侦听器调用内的默认。
我很清楚，在使用{passive:true}时我无法使用e.preventDefault()并且有意义，我只想知道如何在控制台中解决[Violation]警告时滚动DIV时阻止页面滚动。
这是代码片段不起作用并在控制台中产生上述错误。
document.getElementById('fixed-content').addEventListener('wheel', avoidBodyScroll, Modernizr.passiveeventlisteners ? {passive:true} : false); document.getElementById('fixed-content').addEventListener('mousewheel', avoidBodyScroll, Modernizr.passiveeventlisteners ? {passive:true} : false); document.getElementById('fixed-content').addEventListener('DOMMouseScroll', avoidBodyScroll, Modernizr.passiveeventlisteners ? {passive:true} : false); function avoidBodyScroll(e) { let delta = e.wheelDelta || (e.originalEvent && e.originalEvent.wheelDelta) || -e.detail, bottomOverflow = this.scrollTop + $(this).outerHeight() - this.scrollHeight >= 0, topOverflow = this.scrollTop <= 0; if ((delta 0 && topOverflow)) { e.preventDefault(); } } // Nothing to check here as it's just repeating tags function multiplyNode(node, count, deep) { for (var i = 0, copy; i < count - 1; i++) { copy = node.cloneNode(deep); node.parentNode.insertBefore(copy, node); } } multiplyNode(document.querySelector('.p-in-fixed'), 20, true); multiplyNode(document.querySelector('.p-in-body'), 20, true);
body{ position: relative; background-color: #ccc !important; padding: 20px 20px 20px 50%; } .fixed { top: 20px; left: 20px; right: 20px; bottom: 20px; padding: 20px; overflow: auto; position: fixed; border: 1px solid #333; width: calc(50% - 40px); background-color: #f8f8f8; }
/*! modernizr 3.5.0 (Custom Build) | MIT * * https://modernizr.com/download/?-passiveeventlisteners-setclasses !*/ !function(e,n,s){function o(e,n){return typeof e===n}function a(){var e,n,s,a,t,f,l;for(var c in r)if(r.hasOwnProperty(c)){if(e=[],n=r[c],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(s=0;s<n.options.aliases.length;s++)e.push(n.options.aliases[s].toLowerCase());for(a=o(n.fn,"function")?n.fn():n.fn,t=0;t<e.length;t++)f=e[t],l=f.split("."),1===l.length?Modernizr[l[0]]=a:(!Modernizr[l[0]]||Modernizr[l[0]]instanceof Boolean||(Modernizr[l[0]]=new Boolean(Modernizr[l[0]])),Modernizr[l[0]][l[1]]=a),i.push((a?"":"no-")+l.join("-"))}}function t(e){var n=l.className,s=Modernizr._config.classPrefix||"";if(c&&(n=n.baseVal),Modernizr._config.enableJSClass){var o=new RegExp("(^|\\s)"+s+"no-js(\\s|$)");n=n.replace(o,"$1"+s+"js$2")}Modernizr._config.enableClasses&&(n+=" "+s+e.join(" "+s),c?l.className.baseVal=n:l.className=n)}var i=[],r=[],f={_version:"3.5.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var s=this;setTimeout(function(){n(s[e])},0)},addTest:function(e,n,s){r.push({name:e,fn:n,options:s})},addAsyncTest:function(e){r.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=f,Modernizr=new Modernizr,Modernizr.addTest("passiveeventlisteners",function(){var n=!1;try{var s=Object.defineProperty({},"passive",{get:function(){n=!0}});e.addEventListener("test",null,s)}catch(o){}return n});var l=n.documentElement,c="svg"===l.nodeName.toLowerCase();a(),t(i),delete f.addTest,delete f.addAsyncTest;for(var u=0;u<Modernizr._q.length;u++)Modernizr._q[u]();e.Modernizr=Modernizr}(window,document); Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates.
或者，我是否使事情变得不必要地复杂化，因为它可以通过使用CSS来实现？
UPDATE1：
对于使用::-webkit-scrollbar属性的webkit浏览器，这是一个纯css选项。
body{ position: relative; background-color: #ccc !important; padding: 20px 20px 20px 50%; } .fixed { top: 20px; left: 20px; right: 20px; bottom: 20px; padding: 20px; overflow: auto; position: fixed; border: 1px solid #333; width: calc(50% - 70px); background-color: #f8f8f8; } .fixed::-webkit-scrollbar { width: 0px; background: transparent; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
看看这个小提琴 。 我的答案中的关键技巧是分离两个卷轴。 在你的例子中，主体有滚动，所以固定的div有一个带滚动的容器。 通过为具有卷轴的p-in-bodies制作容器元件，并将固定内容放置在其外部，您可以绕过它。
HTML（添加了容器包装器）：
...
...
CSS（更改了html，正文并添加了#container）：
html, body{ padding: 0; width: 100%; height: 100%; } .fixed { top: 20px; left: 20px; right: 20px; bottom: 20px; padding: 20px; overflow: auto; position: absolute; border: 1px solid #333; width: calc(50% - 40px); background-color: #f8f8f8; } #container{ position: relative; background-color: #ccc !important; padding: 20px 20px 20px 50%; width: 100%; height: 100%; box-sizing: border-box; overflow-y: auto; }