scrollable element

HTML

<div>some content <br> just scroll down</div>
<div class="container">
  <div class="first">This list should be scrolled -></div>
  <div class="scrollable" tabindex='-1'>
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
  </div>
</div>
<footer>this is footer</footer>

CSS

body {
  background: white;
  padding: 0px;
  font-family: Helvetica;
  height: 1000px;
  display: flex;
  flex-direction: column;
}

.container {
  margin-top: auto;
  background: gray;
  width: 100%;
  height: 100px;
  
  display: flex;
  flex-direction: row;
}

.first {
  width:50%;
  height: inherit;
}
.scrollable {
  width:50%;
  height: inherit;
  overflow: scroll;
}

footer {
 height: 50px;
 color:white;
 background: #000;
}

JavaScript

$(window).on('mousewheel', function(e) {
		//scrolling bottom
		if(e.originalEvent.wheelDelta /120 <= 0) {
       //checks if we reached bottom
    		if($(this).scrollTop() + $(this).height() == $(document).height()) {
    				$('.scrollable').scrollTop($('.scrollable').scrollTop() + 10);
    		} 
    }
});