3

I have a parent and children. the children has the property as 'overflow:auto' when the user scroll this, after the ending, the parent start to scrolls. how to prevent this?

I don't require to parent container scrolled even after end of the children scroller.

here is the code :

.children{
  height:20em;
  overflow:auto;
  border:2px solid green;
  position:fixed;
  left:0;
  background:gray;
  z-index:100;
}

I have some huge content to show this issue, so please visit the link and scroll the children ( Gray backgrounded )

Live Demo

3gwebtrain
  • 14,640
  • 25
  • 121
  • 247
  • You can make it with javascript, but is not a good idea because is the default behaviour of the operating system and browsers. User want to make it. With javascript you need to stop the bubbling (search about it). – Marcos Pérez Gude Jan 13 '16 at 11:30
  • You mean when you scroll child and it reach its end and then the body start scoll .... using mouse wheel? – Asons Jan 13 '16 at 11:31
  • 3
    Possible duplicate of [How to prevent page scrolling when scrolling a DIV element?](http://stackoverflow.com/questions/7600454/how-to-prevent-page-scrolling-when-scrolling-a-div-element) – Abhitalks Jan 13 '16 at 11:33
  • @LGSon - yes exactly. is there any `css` approch. i would like to avoid adding `js` here. – 3gwebtrain Jan 13 '16 at 11:33
  • Nope, no CSS ... scripting is needed .. check Abhitalks dupe link – Asons Jan 13 '16 at 11:35
  • On second thoughts, @3gwebtrain by any chance do you open that `div` as a popup on some button click? – Abhitalks Jan 13 '16 at 11:48
  • yes, i do both button click as well without – 3gwebtrain Jan 13 '16 at 11:52
  • 1
    If you open it as a popup on button click, then a simpler way could be to set `overflow:hidden` on the `body` when the popup is opened, and revert it back once the popup is closed. Usually people do it via a `noscroll` class. See here for a demo -- https://plnkr.co/edit/aXamlyX1bBGNdJYCZAer?p=preview – Abhitalks Jan 13 '16 at 11:54

1 Answers1

1

This is the default behavior of the browser.

To prevent this check this codepen by Leland Kwong.

http://codepen.io/LelandKwong/pen/edAmn

   var trapScroll;

(function($){  

  trapScroll = function(opt){

    var trapElement;
    var scrollableDist;
    var trapClassName = 'trapScroll-enabled';
    var trapSelector = '.trapScroll';

    var trapWheel = function(e){

      if (!$('body').hasClass(trapClassName)) {

        return;

      } else {  

        var curScrollPos = trapElement.scrollTop();
        var wheelEvent = e.originalEvent;
        var dY = wheelEvent.deltaY;

        // only trap events once we've scrolled to the end
        // or beginning
        if ((dY>0 && curScrollPos >= scrollableDist) ||
            (dY<0 && curScrollPos <= 0)) {

          opt.onScrollEnd();
          return false;

        }

      }

    }

    $(document)
      .on('wheel', trapWheel)
      .on('mouseleave', trapSelector, function(){

        $('body').removeClass(trapClassName);

      })
      .on('mouseenter', trapSelector, function(){   

        trapElement = $(this);
        var containerHeight = trapElement.outerHeight();
        var contentHeight = trapElement[0].scrollHeight; // height of scrollable content
        scrollableDist = contentHeight - containerHeight;

        if (contentHeight>containerHeight)
          $('body').addClass(trapClassName); 

      });       
  } 

})($);

var preventedCount = 0;
var showEventPreventedMsg = function(){  
  $('#mousewheel-prevented').stop().animate({opacity: 1}, 'fast');
}
var hideEventPreventedMsg = function(){
  $('#mousewheel-prevented').stop().animate({opacity: 0}, 'fast');
}
var addPreventedCount = function(){
  $('#prevented-count').html('prevented <small>x</small>' + preventedCount++);
}

trapScroll({ onScrollEnd: addPreventedCount });
$('.trapScroll')
  .on('mouseenter', showEventPreventedMsg)
  .on('mouseleave', hideEventPreventedMsg);      
$('[id*="parent"]').scrollTop(100);

Hope this helps you! :)

Mevan Abeydeera
  • 71
  • 4