Prevent parent scroll when in child div

Question

When I scroll to the bottom of the child div, the body element starts scrolling.

How can I prevent this? I only want the body to s

Answer 1

If you are not nesting your elements inside other scrolling elements (most cases) you can take this simple high performance approach:

$(document).ready(function () {
  $('.self-scroll').on('mouseover', function () {
    document.body.style.overflow='hidden';
  });
  $('.self-scroll').on('mouseout', function () {
    document.body.style.overflow='auto'; // or = 'visible'
  });
});

Now if you apply self-scroll class to any element, it will not scroll body.