All geek questions in one place

Scroll only the page element, not the entire page

Have you ever noticed that when you scroll a crowded div or text area with the mouse wheel and you scroll it to the end, the whole page starts scrolling?

Can this be prevented?

I quickly checked the jQuery scroll () event handler, but it seems too late.

Here's the test code if you want to play.

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
  $(function() {
    $('#scroller').scroll(function() {
      $('#notification').css('display','block').fadeOut();
      return false;
    })
  })
  </script>
</head>
<body style="height: 2000px">
  <div id="scroller" style="width: 500px; height: 500px; overflow: scroll; margin: 50px">
    <div style="width: 1000px; height: 1000px; background: #ddd"></div>
  </div>
  <div id="notification" style="display:none">Bang</div>
</body>
</html>
+3
source share
1 answer

This JS will do this, basically just dragging and dropping the body when the mouse is over the div # scroller, and then return it to its normal state when you exit.

$("#scroller").hover(
  function () {
        $('body').css('overflow','hidden');
  }, 
  function () {
        $('body').css('overflow','auto');
  }
);

Tested in Safari, Firefox and IE8

+2
source

Source: https://habr.com/ru/post/1757032/

More articles:


All Articles