强制用户在继续操作之前滚动水平div的宽度

Question

我想在div上禁用指针事件，直到到达视口顶部为止，粘贴div，然后在用户向下滚动页面之前，如果用户滚动，则迫使用户滚动div的宽度。备份页面时，应先向相反方向滚动div，然后才能在其上方继续操作。

这是我目前拥有的

console.log("start"); 

var stickyTop = $('.middle').offset().top;

$(window).on( 'scroll', function(){
    if ($(window).scrollTop() >= stickyTop) {
        $('.middle').removeClass("no")
        $('.middle').addClass( "yes" );
        console.log("at the top, now scroll");
    } else {
        $('.middle').addClass( "no" );
        console.log("not at top, don't scroll");
    }
});


var mySwiper = new Swiper('.swiper-container', {
    mousewheel: true,
    direction: 'horizontal',
    slidesPerView: 'auto',
    spaceBetween: 0,
    simulateTouch: false,
    freeMode: true,
    touchStartForcePreventDefault: true
  });

这是一个包含更多代码的Codepen，因此您可以有一个更好的主意，现在您可以看到div会粘住，但它们无法超越它。

https://codepen.io/anon/pen/RvJLOZ