Prevent parent scroll

by Cătălin Dogaru

HTML

<div class="sidebar">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit minus accusantium quibusdam illum explicabo, sapiente, debitis beatae, sint provident itaque officiis laborum ipsam tempora excepturi aperiam laboriosam suscipit labore fugit.</p>
  <p>Qui suscipit doloremque, corporis officia, rem ea voluptate est cum consequuntur, voluptatum voluptates. Laudantium illum modi tempore fugiat, nisi accusantium autem veniam minus sint explicabo nobis doloribus possimus minima dicta.</p>
  <p>Praesentium suscipit quis magnam iste voluptatum repudiandae ipsum sunt! Saepe vero ab ad, itaque odio ut maiores? Deserunt minima fugit facere nemo, maiores quasi iste assumenda illum accusamus. Ab, ad!</p>
  <p>Doloremque earum, in adipisci dignissimos eos tenetur cupiditate obcaecati, recusandae iusto quaerat unde ipsam, molestiae nam voluptatum facilis magnam. Praesentium officia repellat veniam expedita, perspiciatis, nihil veritatis consectetur provident voluptas.</p>
  <p>Ad dolorum sed adipisci voluptatem! Iusto, temporibus, laudantium. Impedit officiis, natus quae veniam odio eveniet, facere ratione fugiat ex, laborum architecto? Perspiciatis sunt, magni tenetur neque eius fugit ullam modi?</p>
</div>
<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem diam, posuere sed dapibus a, lobortis vel nulla. Aenean at tempor urna, eu pellentesque odio. Praesent sit amet nunc ut nunc luctus viverra. Etiam consectetur, augue nec dignissim tempus, velit nunc facilisis neque, quis interdum massa leo eget libero. Integer id vulputate massa, in lacinia tortor. Sed aliquet metus auctor felis volutpat convallis. Vivamus dolor lacus, aliquet ut imperdiet vitae, volutpat id neque. Fusce et mauris volutpat tortor cursus gravida vitae eget nisi.</p>
  <p>Vestibulum a laoreet sapien. Aliquam auctor, turpis sit amet mattis accumsan, lectus dolor facilisis augue, a ultrices odio urna ac nunc. Cras vel tincidunt sapien. Integer...

CSS

.sidebar {
  border: 1px solid #ccc;
  height: 360px;
  overflow-y: auto;
  width: 240px;
  padding:30px;
}

.sidebar p {
  margin-bottom: 30px;
}

.container p {
  margin: 60px 120px;
}

JavaScript

(function ($) {
  $('[data-scroll="prevent"]').on('wheel', function (event) {
    var wheelEvent = event.originalEvent;
    var prevent = false;
    
    if (wheelEvent.deltaY > 0) { // scroll down
      prevent = 0 === this.scrollHeight- $(this).innerHeight() - $(this).scrollTop();
    } else { // scroll up
			prevent = 0 === $(this).scrollTop();
    }
    
    if (prevent) {
      event.preventDefault();
      event.stopPropagation();
    
      return false;    
    }
  });
})(jQuery);