鼠标滚轮增量滚动仅在特定元素内

Question

我的目标是使用鼠标滚轮以等于两个span元素之间的距离的间隔向下滚动页面。问题是，我只希望在CSS属性 overflow-y 设置为 scroll 而不是整个文档的特定div元素内进行滚动。这是代码在整个文档上正常运行的示例：Codepen。这就是我要寻找的东西，但似乎无法完成工作，尝试使代码仅滚动“ page_2” div：Codepen。下面是我正在使用的代码。如何在不滚动整个文档的情况下更改代码以滚动特定的div？

 var delay = false;

 $(document).on('wheel mousewheel DOMMouseScroll', function(event) {

      event.preventDefault();

      if(delay) return;

      delay = true;

      setTimeout(function(){delay = false}, 0)

      var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

      var a = document.getElementsByTagName('span');

      if(wd < 0) 
      {
           for(var i = 0 ; i < a.length ; i++) 
           {
                var t = a[i].getClientRects()[0].top;
                if(t >= 40) break;
           }  
      } 
      else 
      {
           for(var i = a.length-1 ; i >= 0 ; i--) 
           {
                var t = a[i].getClientRects()[0].top;
                if(t < -20) break;
           }
      }
      if(i >= 0 && i < a.length) 
      {
           $('html,body').animate({ scrollTop: a[i].offsetTop }, 300);            
      }
 });