Prevent scrolling of parent element when inner element scroll position reaches top/bottom? [duplicate]

Answer 1

M.K. offered a great plugin in his answer. Plugin can be found here. However, for the sake of completion, I thought it'd be a good idea to put it together in one answer for AngularJS.

1. Start by injecting the bower or npm (whichever is preferred)

   bower install jquery-scrollLock --save
   npm install jquery-scroll-lock --save
   

2. Add the following directive. I am choosing to add it as an attribute

   (function() {
      'use strict';
   
       angular
          .module('app')
          .directive('isolateScrolling', isolateScrolling);
   
          function isolateScrolling() {
              return {
                  restrict: 'A',
                  link: function(sc, elem, attrs) {
                     $('.scroll-container').scrollLock();
                  }
              }
          }
   })();
   

3. And the important piece the plugin fails to document in their website is the HTML structure that it must follow.

   
       
   
            ... whatever ...
       
   
   

The attribute isolate-scrolling must contain the scrollable class and it all needs to be inside the scroll-container class or whatever class you choose and the locked class must be cascaded.