Запретить прокрутку страницы при прокрутке DIV при разрешении предупреждения [Нарушение] в консоли

Вначале это, кажется, дублирует вопрос здесь, но есть еще что нужно выяснить.

Как я могу разрешить приведенное ниже предупреждение [Violation] в консоли Google Chrome?

[Нарушение] Добавлен непассивный прослушиватель событий для блокировки прокрутки событие "mousewheel". Рассмотрите маркировку обработчика событий как "пассивную" сделайте страницу более отзывчивой.

Вот фрагмент кода, который работает, но с вышеупомянутым предупреждением [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 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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" 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>

Ответы

Ответ 1

Update1:

Это чистая опция css для браузеров webkit с использованием свойства ::-webkit-scrollbar.

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>

Ответ 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, body и добавлен #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;
}