CSS捕捉点中断平滑滚动代码

Question

我有一个很棒的代码，该代码在“ mousewheel”事件上以<span>元素确定的间隔平滑滚动页面。正是我想要的方式：

https://codepen.io/Wcomp/pen/vbrqLJ?editors=1100

但是，如果用户单击并拖动滚动条而不是使用鼠标滚轮滚动，则我还要完成的操作是使滚动条移至mouseup上最近的span元素上。 CSS Scroll Snap属性可以很好地完成此操作，但在此过程中会增加鼠标滚轮的平滑滚动速度：

https://codepen.io/Wcomp/pen/vbrqmp?editors=1100

我为平滑鼠标滚轮滚动所拥有的代码是否可以修改为完成以下任务：

body{
    scroll-snap-type: y mandatory;
}

span{
    scroll-snap-align: start;
}

CSS Scroll Snap也无法控制时间。这是鼠标滚轮的平滑滚动代码：

function mouse_wheel_scroll_behavior() {

  var delay = false;

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

    event.preventDefault();

    if(delay) return;

    delay = true;

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

    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 }, 600);            
    }

  });
}