在控制台中解决[Violation]警告时滚动DIV时阻止页面滚动 [英] Prevent page scrolling when scrolling a DIV while resolving [Violation] warning in console

问题描述

起初这似乎是在这里回答的重复问题，但还有更多需要弄清楚。

At first this seems to be duplicate question answered here but there is more that need to be figured out.

如何在Google Chrome控制台中解决以下 [违规] 警告？

How can I resolve below given [Violation] warning in google chrome console?

[违规]为滚动阻止
'mousewheel'事件添加了非被动事件监听器。考虑将事件处理程序标记为'被动'到
使页面更具响应性。

[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.

这是有效的代码片段但是使用上面提到的 [违规] 警告。

Here is the code snippet that works but with the above mentioned [Violation] warning.

$.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 && bottomOverflow) || (delta > 0 && topOverflow)) {
      e.preventDefault();
    }
  });
  return this;
};

$('.js-isolated-scroll').isolatedScroll()

// Nothing to check here as it's just repeating <p> 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;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="js-isolated-scroll fixed">
  <p class="p-in-fixed">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.</p>
</div>

<p class="p-in-body">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.</p>

以下是我尝试使用Modernizr的 passiveeventlisteners 修复此代码 Modernizr.passiveeventlisteners？ {passive：true}：false ，同时按照此处给出答案。但我在控制台中收到此错误消息：

Here is how I tried to fix it using Modernizr's passiveeventlisteners with this code Modernizr.passiveeventlisteners ? {passive:true} : false while following an answer given here. But I am getting this error message in console:

无法阻止被动事件侦听器调用内的默认。

Unable to preventDefault inside passive event listener invocation.

我很清楚，在使用 {passive时，我不能使用 e.preventDefault（） ：true} 这是有道理的，我只想知道如何在控制台中解决[Violation]警告的同时滚动DIV时阻止页面滚动。

It's clear for me that I cannot using e.preventDefault() while using {passive:true} and that make sense, I just want know how can I Prevent page scrolling when scrolling a DIV while resolving [Violation] warning in console.

以下是无效的代码段，并在控制台中产生上述错误。

Here is the code snippet that doesn't work and produces above mentioned error in console.

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 && bottomOverflow) || (delta > 0 && topOverflow)) {
    e.preventDefault();
  }
}

// Nothing to check here as it's just repeating <p> 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;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
  /*! 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);
</script>

<div id="fixed-content" class="js-isolated-scroll fixed">
  <p class="p-in-fixed">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.</p>
</div>

<p class="p-in-body">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.</p>

或者，我是否因为只使用CSS就可以实现不必要的复杂化？

Or, Am I making things unnecessarily complicated because as it can be achieved just by using CSS?

推荐答案

Update1：​​

Update1:

这是使用 :: - webkit的webkit浏览器的纯css选项-scrollbar property。

This is a pure css option for webkit browsers using the ::-webkit-scrollbar property.

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

<div class="js-isolated-scroll fixed">
  <p class="p-in-fixed">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.</p>
</div>

<p class="p-in-body">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.</p>

这样的事情会起作用吗？当您将鼠标悬停在滚动div上时，在主体或其他具有隐藏溢出的父元素上切换类，从而阻止使用CSS滚动父级。

Would something like this work? When you hover over the scrolling div, toggle a class on the body or other parent element that has an overflow of hidden, thus preventing parent scroll using CSS.

$('.js-isolated-scroll').bind('mouseenter mouseleave touchstart touchend', 
function() {
    $("body").toggleClass("no-scroll"); 
});

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

.no-scroll {
    overflow: hidden;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fixed-content" class="js-isolated-scroll fixed">
  <p class="p-in-fixed">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. 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. 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. 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. 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. 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. 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.</p>

这篇关于在控制台中解决[Violation]警告时滚动DIV时阻止页面滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！