用户滚动（不单击！）时如何自动滚动（向上和向下）到该部分

Question

我正在尝试自己实现滑动滚动（例如fullPage.js）。我不想使用插件来创建插件。我只想在用户触发滚动（上下滚动！）时滚动/滑动到某个部分。

我已经在整个Internet上进行了搜索，但我不知道如何防止用户滚动以用我的动画滚动（台式机和移动机）代替标准滚动行为。我想在Bootstrap轮播项目中实现此动画。

总而言之，我有一个带有多个项目的轮播，每个项目都会有一个标题（视口外）。当用户向下滚动时，我将显示标题（如第三张幻灯片here），而当用户向上滚动时，我将向上滚动并隐藏标题。

下面是运行轮播示例的CodePen：link

这就是我到目前为止（我从StackOverflow中获得了部分代码）...

$(function(){
    var _top = $(window).scrollTop();
    var _direction;
    $(window).scroll(function(){
        var _cur_top = $(window).scrollTop();
        if(_top < _cur_top)
        {
            _direction = 'down';
            window.scrollTo(0, document.body.scrollHeight);
        } else {
            _direction = 'up';
            window.scrollTo(0, 0);
        }
        _top = _cur_top;
        console.log(_direction);
    });
});

我得到了一个（非常！）缓慢的动画...一点都不流畅。

我也尝试过：

$(document.body).on('DOMMouseScroll mousewheel', function (event) {
    event.preventDefault();
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        // Scroll up
        $("html, body").animate({scrollTop: 0}, 400);
    }
    else {
        // Scroll down
    }

});

但是，该代码无法正常工作，并且出现以下错误： [干预]由于目标被视为被动，因此无法阻止被动事件侦听器中的Default。

如果您能帮助我，我将非常感谢！

已编辑：

有人在“ StackOverflow enespañol”帮助了我。这是solution！非常感谢@matahombres;）