[英]bacon.js - Ignoring certain values in a stream
假设以下代码(可以在此处查看当前状态):
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”并继续滚动,则滚动流将不会发出任何值。
有想法吗?
谢谢
我认为您真正想要的是将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);
这些是我所做的更改:
在您的pageNumber
函数中:
return previous + next >= $('.parallax__group').length ? previous : previous + next;
并在您的inRange
函数中:
return pageNumber >= 0 && pageNumber < totalPages;
这是一个小提琴,包含您的代码和我的更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.