How Do I Limit Scrolling to a Fixed Div?

Question

I have two divs, structured as follows:

<div id="container">
  <div id="inner"></div>
</div>

The outer, container div has a very large height (this is simply meant to emulate a real-world scenario where there's a lot of content in the parent div). The inner div is a fixed position div, with a defined height. Overflow-y is set on the inner div, so that people can scroll through it to see any content that doesn't fit within its defined height.

Here's a codepen: http://codepen.io/anon/pen/myVxar

How do I set it such that when you're done scrolling through the inner div, the outer div does not scroll? In other words, scrolling within the inner div should never scroll the outer div.

Is there a way to do this using CSS/HTML? If not, how would I do it using Javascript/Jquery?

Answer 1

You can't disable the scroll for the page but you can disable the mousewheel event

Edit: I do have to say that if you are running into this in the real world and you have full control over the front end code you should rethink you're strategy, because there is most definitely a better way.

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function wheel(e) {
  preventDefault(e)
}
// bind some scroll functionality to the inner div

$('#inner').on('scroll', function(e){ 
    var elem = $(e.currentTarget);
    // check if user has scrolled to bottom
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()){
        // disable mouse scroll event
        if (window.addEventListener) {
            window.addEventListener('DOMMouseScroll', wheel, false);
        }
        window.onmousewheel = document.onmousewheel = wheel;
        console.log('done')
    } else{
      // remove the event that disables scroll
      if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', wheel, false);
      } 
      window.onmousewheel = document.onmousewheel = document.onkeydown = null; 
    }
});
// remove the event that disabled scroll if user mouse leaves inner container
$('#inner').mouseout(function(e){
  if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', wheel, false);
      } 
      window.onmousewheel = document.onmousewheel = document.onkeydown = null; 
})

Answer 2

Also wondering why you are taking this approach. I think you may be setting the large height in case the content is long, but why not just do something like this?

#container {
    height:200px;
    width:300px;
    overflow:scroll;
    border:1px solid;
}

Once the inner content overflows the container, the container will scroll - the .inner doesn't need any styling relating to the scrolling. Post more detail if I am missing something.

Answer 3

Assuming that the inner div isn't always covering other content... You could just adjust the height and overflow of the container when you show the inner div:

Working Example

$('#container').click(function () {
    if ($('#inner').is(':visible')) {
        $('#inner').fadeOut('slow');
        $('#container').css({
            height: 14000,
            overflow: 'auto'
        });
    } else {
        $('#inner').fadeIn('slow', function () {
            $('#container').css({
                height: "100%",
                overflow: 'hidden'
            });
        });
    }
});

#container {
    height: 14000px;
    width: 100%;
}
#inner {
    display:none;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 15px;
    font-size: 18px;
    color: #808080;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">click Me!
    <div id="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat mauris at consequat rutrum. Nam ut tempus nisl, quis luctus turpis. In eu dolor a ligula rhoncus convallis a in lectus. Cras pretium felis in justo semper convallis. Integer nisl arcu, venenatis sed odio in, accumsan consectetur mi. Sed fermentum tempus elit at varius. Proin scelerisque auctor nibh quis lobortis. Aliquam enim elit, rhoncus at ultricies a, rutrum id ipsum. Morbi eu justo id mi accumsan ullamcorper at eget risus. Curabitur elementum ultrices ex, sit amet laoreet orci. Proin lobortis quis lacus quis tristique. Nulla facilisi. Quisque vel libero quis lectus convallis volutpat. Sed ullamcorper luctus neque, id efficitur eros fermentum id. Fusce et nulla faucibus, faucibus ante id, pellentesque erat. Quisque ac feugiat nisi, eget feugiat nulla. Morbi quis interdum tellus. Etiam porttitor lacus ac orci rhoncus, eu commodo lacus tempus. Aliquam finibus egestas leo eget efficitur. Duis maximus tincidunt lorem, eu convallis ipsum feugiat lobortis. Proin auctor volutpat velit, ac suscipit neque vestibulum sed. Suspendisse pretium, libero sit amet euismod imperdiet, risus nulla sodales mi, luctus imperdiet enim augue at odio. Suspendisse mollis, eros quis malesuada feugiat, mi libero elementum odio, eu scelerisque elit nibh quis ante. Sed malesuada porttitor dui in volutpat. Praesent consequat nisi vel ipsum bibendum, at mollis nibh congue. Cras vitae turpis aliquet, sollicitudin libero ut, fringilla ex. In leo sem, mollis et quam eget, cursus laoreet quam. Fusce pulvinar felis eu finibus venenatis. Integer quis mauris commodo, sollicitudin mi ullamcorper, hendrerit justo. Donec luctus ultrices ante. Curabitur eget neque eu augue mattis elementum a vel ante. Aliquam posuere augue ac velit bibendum, ut efficitur mi convallis. Curabitur velit tellus, facilisis vel elit at, ornare scelerisque massa. Donec rhoncus eget diam non tincidunt. Ut in sapien sapien. Mauris ultricies est ut facilisis mollis. Duis finibus malesuada mollis. Praesent ultricies lectus sed dolor pellentesque, ac volutpat ipsum maximus. Donec risus nulla, accumsan vel orci sit amet, tristique rhoncus diam. Praesent malesuada tincidunt placerat. Proin at congue odio. Sed ac velit quis risus aliquet consectetur at sit amet magna. Fusce quis lacinia elit, eget tincidunt libero. Donec ac elit vel lacus iaculis aliquet vitae ut purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec condimentum mauris ipsum, at laoreet odio sodales at. Vestibulum in ex tellus. Proin non varius ligula, nec ultricies ligula. Praesent quis lacus at augue tristique faucibus. Quisque eleifend eu magna sed fermentum. Phasellus ac mattis erat. Donec pharetra nunc eget facilisis condimentum. Etiam sagittis tempus sapien, id malesuada felis pretium eu. Aenean hendrerit nec velit at euismod. Pellentesque at maximus risus, sed eleifend nisi. Sed quis interdum orci. Donec vel nisl malesuada, interdum felis at, porttitor odio.</div>
</div>