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

Question

假設以下代碼（可以在此處查看當前狀態）：

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);

Answer 2

這些是我所做的更改：

在您的pageNumber函數中：

return previous + next >= $('.parallax__group').length ? previous : previous + next;

並在您的inRange函數中：

return pageNumber >= 0 && pageNumber < totalPages;

這是一個小提琴，包含您的代碼和我的更改。