Prevent content div to scroll when side-bar scroll ends

Question

So I have this side bar that when I scroll-down to the end and I continue to scroll it will scroll-down the content div. How can I make the side bar div scroll to affect only his div and ignore content div?

This is what it looks like:

* {padding:0;margin:0}
html {min-height:1000%}

#sidebar {
  overflow: auto;
  position: fixed;
  width: 200px;
  height: 200px;
}

<div id="sidebar">
  <p>Lorem Ipsum turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed</p>
</div>

Answer 1

If you are open for a javascript solution you can bind an event listener to the sidebar deactivating the scroll event when you have reached its bottom. The result can be tested in this JSFiddle.

var sidebar = document.getElementById('sidebar');
sidebar.addEventListener('wheel', function(e) {
    if(e.deltaY > 0 && this.scrollTop >= this.clientHeight) {
        e.preventDefault();
    }
});

Note: This snippet might need some testing and tweaking if you are going to use this for a live site. I haven't really tested the browser compatibility and you might want to add support for touch devices.