Scroll Issue Fix

prevent scroll outside while scrolling inside a div

by Amal Das

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
  <div id="toolbox">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar in urna non gravida. Cras varius eleifend dignissim. Cras accumsan aliquam ex vel auctor. In vulputate rhoncus nulla sed tempus. Suspendisse leo odio, elementum in leo a, facilisis interdum lacus. Maecenas cursus felis vitae tortor dapibus dignissim. Aliquam quis suscipit arcu, eget faucibus elit. Aliquam erat volutpat.

Proin hendrerit non risus ut placerat. Phasellus ac est eu sem pharetra faucibus. Curabitur semper quam vel convallis dictum. Nunc eleifend viverra maximus. Proin dolor dui, pharetra nec fermentum in, dictum eget ex. Donec imperdiet ornare consectetur. Aenean ut tortor eget metus sodales vehicula.</p>
  </div>

CSS

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

  #toolbox {
    overflow: auto;
    position: fixed;
    top: 100px;
    left: 200px;
    width: 200px;
    height: 300px;
    background: #fff;
  }

JavaScript

$(function() {
			var $s = $.noConflict(true);
      var scrolDiv = $s('#toolbox'),
      height = scrolDiv.height(),
      scrollHeight = scrolDiv.get(0).scrollHeight;
	scrolDiv.bind('mousewheel', function(e, d) {
    if((this.scrollTop === (scrollHeight - height) && d < 0) || (this.scrollTop === 0 && d > 0)) {
      e.preventDefault();
    }
  });

});