Инкрементное прокручивание колесика мыши только внутри определенного элемента

Question

Моя цель состоит в том, чтобы с помощью колесика мыши прокручивать страницу вниз с интервалами, равными расстоянию между двумя span элементами. Проблема в том, что прокрутка должна происходить только внутри определенного элемента div со свойством CSS overflow-y , установленным на scroll , а не со всем документом. Вот пример кода, работающего правильно на всем документе: 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);            
      }
 });