在解决控制台中的 [Violation] 警告时滚动 DIV 时防止页面滚动

Posted

技术标签:

【中文标题】在解决控制台中的 [Violation] 警告时滚动 DIV 时防止页面滚动【英文标题】：Prevent page scrolling when scrolling a DIV while resolving [Violation] warning in console 【发布时间】：2018-01-05 07:59:54 【问题描述】：

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

如果在谷歌浏览器控制台中给出[Violation] 警告，我该如何解决以下问题？

[违规] 向滚动阻塞添加了非被动事件侦听器 “鼠标滚轮”事件。考虑将事件处理程序标记为“被动”以 使页面更具响应性。

这是有效的代码 sn-p，但带有上述[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 && 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。但我在控制台中收到此错误消息：

无法在被动事件侦听器调用中阻止默认值。

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

这是代码 sn-p 不起作用并在控制台中产生上述错误。 

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===nfunction 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;tryvar 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 来实现？

【问题讨论】：

【参考方案1】：

更新1：

这是使用 ::-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;

<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 上时，在 body 或其他具有隐藏溢出的父元素上切换一个类，从而防止使用 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>

【讨论】：

酷 :) 现在唯一的问题是随着滚动条的消失，内容可能会发生很大变化，这对用户体验不利。 @Tomato 正如您所指出的，内容转移也是我无法将其标记为选定答案的原因之一。当然，JS的问题并没有解决。 为使用纯 css 的基于 webkit 的浏览器添加了一个更新，以完全隐藏滚动条。目前仅适用于 Chrome、Safari、Opera、ios Safari、android 浏览器和适用于 Android 的 Chrome。【参考方案2】：

看看这个fiddle。 我的答案中的关键技巧是将两个卷轴分开。 在您的示例中，主体具有滚动，因此固定 div 具有带滚动的容器。通过为具有滚动条的 p-in-body 制作一个容器元素，并将固定内容放置在它之外，您可以解决这个问题。

html（添加容器包装）：

<div id="container">
  <p class="p-in-body">...</p>
</div>

<div id="fixed-content" class="fixed">
    <p class="p-in-fixed">...</p>
</div>

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;

【讨论】：

我有一种情况，我无法从容器中添加任何东西，当然值得支持 :) 谢谢。

以上是关于在解决控制台中的 [Violation] 警告时滚动 DIV 时防止页面滚动的主要内容，如果未能解决你的问题，请参考以下文章

access violation问题的解决办法!

Blender 在启动时崩溃，EXCEPTION_ACCESS_VIOLATION

Internal Exception: access violation in module ‘SPICEINP.DLL‘ [000007F9].解决办法

电脑上有“access violation at address”是啥意思？

Access violation at address 怎么办

JVM 崩溃 - “EXCEPTION_ACCESS_VIOLATION”