Запрещаем прокрутку страницы

запрещаем прокрутку страницы при прокрутке элемента

HTML

<div class="scroller-block scroller-block_first">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, tempora repellat numquam. Impedit et eaque excepturi incidunt suscipit cumque eum beatae numquam, repellat. Numquam, laudantium.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, tempora repellat numquam. Impedit et eaque excepturi incidunt suscipit cumque eum beatae numquam, repellat. Numquam, laudantium.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, tempora repellat numquam. Impedit et eaque excepturi incidunt suscipit cumque eum beatae numquam, repellat. Numquam, laudantium.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, tempora repellat numquam. Impedit et eaque excepturi incidunt suscipit cumque eum beatae numquam, repellat. Numquam, laudantium.</p>
</div>

<div class="scroller-block scroller-block_second">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, tempora repellat numquam. Impedit et eaque excepturi incidunt suscipit cumque eum beatae numquam, repellat. Numquam, laudantium.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, tempora repellat numquam. Impedit et eaque excepturi incidunt suscipit cumque eum beatae numquam, repellat. Numquam, laudantium.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, tempora repellat numquam. Impedit et eaque excepturi incidunt suscipit cumque eum beatae numquam, repellat. Numquam, laudantium.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, tempora repellat numquam. Impedit et eaque excepturi incidunt suscipit cumque eum beatae numquam, repellat. Numquam, laudantium.</p>
</div>

<div class="scroller-block scroller-block_third">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, tempora repellat numquam. Impedit et eaque excepturi incidunt suscipit cumque eum beatae...

CSS

body {
    padding: 15px !important;
    font-family: Ubuntu, Roboto, "Segoe UI", Arial, Helvetica, sans-serif;
}

.scroller-block {
    position : fixed;
    background-color: #000;
    color: #fff;
    top : 15px;
    left : 15px;
    width : 320px;
    height : 240px;
    overflow : auto;
    padding: 15px;
    box-shadow: 0 0 32px rgba(0,0,0, .5);
    box-sizing: border-box;
    -webkit-overflow-scrolling : touch; /* for iOs inertion scroll */
}

.scroller-block_second {
    left: 350px;
}

.scroller-block_third {
    top: 270px;
}

JavaScript

$.preventScrolling = function(selector) {
    
  $.each($(selector), function(index, element) {

    var element    = $(element),
        scrollDiff = element[0].scrollHeight - element.outerHeight(),
        wheelDelta = null,
        scrollTop  = null;
        
        element.on('mousewheel DOMMouseScroll', function(event) {
        
          /**
           * направление колёсика мыши (-1 вниз, 1 вверх)
           *
           * нормализация определения направления прокрутки
           * (firefox < 0 || chrome etc... > 0)
           * (event.originalEvent.detail < 0 || event.originalEvent.wheelDelta > 0)
           */
          wheelDelta = (event.originalEvent.detail < 0 || event.originalEvent.wheelDelta > 0) ? 1 : -1;
          scrollTop  = element[0].scrollTop; // позиция скролла
          
          if ((scrollTop >= scrollDiff && wheelDelta < 0) || (scrollTop <= 0 && wheelDelta > 0)) {
            event.stopPropagation();
            event.preventDefault();
          }
        });
        
    });

};

$.preventScrolling('.scroller-block');