[英]bacon.js - Ignoring certain values in a stream
Assuming the following code (current state can be viewed 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);
I want to be able to limit the values emitted by the page
stream from 0 to n , n
being the totalPages
(defined in the inRange
method). 我希望能够将page
流发出的值从0限制为n , n
是totalPages
(在inRange
方法中定义)。 In that particular case, there are 7 groups, so the range would be from 0 to 7 在那种特殊情况下,有7个组,因此范围是从0到7
If a user scroll down to '7', and continues scrolling, no values would be emitted from the scroll stream. 如果用户向下滚动到“ 7”并继续滚动,则滚动流将不会发出任何值。
Ideas? 有想法吗?
Thanks 谢谢
I think what you actually want is to limit the value of scroll.scan(0, pageNumber)
to a certain range, not to maintain a "virtual" scroll position and display that only when it currently is in the range. 我认为您真正想要的是将scroll.scan(0, pageNumber)
的值限制在某个范围内,而不是保持“虚拟”滚动位置并仅在当前处于该范围内时显示它。
Try 尝试
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);
These are the changes I made: 这些是我所做的更改:
In your pageNumber
function: 在您的pageNumber
函数中:
return previous + next >= $('.parallax__group').length ? previous : previous + next;
And in your inRange
function: 并在您的inRange
函数中:
return pageNumber >= 0 && pageNumber < totalPages;
Here is a fiddle containing your code with my changes. 这是一个小提琴,包含您的代码和我的更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.