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为{{1} （在totalPages方法中定义）。在该特定情况下，有7个组，因此范围将从0到7

如果用户向下滚动到＆＃39; 7＆＃39;并继续滚动，则不会从滚动流中发出任何值。

想法？

由于

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;

以下是包含我的更改代码的fiddle。

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

2 个答案: