javascript - bacon.js - 忽略流中的某些值

Question

假设如下代码(当前状态可以查看 here ):

function scrollTopFromEvent(evt) {
    return $(evt.target).scrollTop();
}

function scrollDirection(evt) {
    return -evt.originalEvent.wheelDelta / 120 || evt.originalEvent.detail / 3;
}

function pageNumber(previous, next) {
    return previous + next;
}

function scrollToPage(pageNumber) {
    var container = $('.parallax');
    TweenLite.to(container, 1, {
        scrollTop: container.height() * (pageNumber)
    });
}

function inRange(pageNumber) {
    var totalPages = $('.parallax').find('div[id^="group"]').length;
    return pageNumber >= 0 || pageNumber <= totalPages;
}
var scroll = $('.parallax')
    .asEventStream('mousewheel DOMMouseScroll')
    .doAction('.preventDefault').flatMap(scrollDirection);

var page = scroll
    .scan(0, pageNumber)
    .filter(inRange)
    .log()
    .onValue(scrollToPage);

<小时/>

我希望能够将 page 流发出的值从 0 限制为 n、n 是 totalPages(在 inRange 方法中定义)。在该特定情况下，有 7 个组，因此范围为 0 到 7

如果用户向下滚动到“7”并继续滚动，则滚动流不会发出任何值。

想法？

谢谢

Answer 1

我认为你真正想要的是将 scroll.scan(0, pageNumber) 的值限制在一定范围内，而不是维持“虚拟”滚动位置并仅在它时显示目前在范围内。

尝试

var totalPages = $('.parallax').find('div[id^=group]').length; // static, right?

function pageNumber(previous, next) {
    return Math.max(0, Math.min(totalPages, previous + next));
}

scroll.scan(0, pageNumber).onValue(scrollToPage);