Comments (10)
hi @Perezmarc
let me know if i understood correctly:
you want to be able to prevent the user from scrolling up?
from ngx-infinite-scroll.
Nope, I want to prevent the screen, after load the new elements, to go up to -2 element, to stick with the element 0 that was the top of the screen before loading the elements.
The user has 0 1 2 loaded, and if he scrolls up, he will be seeing the element 0, and because he scrolled up, we trigger the function to load elements before 0, when that's done, as the scroll position was top, it is still top, but now, we have -2 and -1 before the element 0, the one we were looking at. Therefore, we loaded new elements, but those are not seen until we scroll up again, having loaded the elements.
In fact, what I want is exactly the same behavior as scrolling down. I am in position 2, and after elements 3 4 are loaded, I'm in the same position I was before they load, position 2, but now I can scroll down to view the elements 3 and 4.
I hope I made my self clear now :)
from ngx-infinite-scroll.
@Perezmarc
I think i understood....
to solve this, I see it as a matter of logics that can be applied to the array of the rendered list in response to the relevant event. I think you can apply this logic by listening to the scrollUp/scrollDown event. However, it sounds complicated :)
I'm not sure this kind of logics should be a part of this directive though.
from ngx-infinite-scroll.
I believe it's a matter of scrolling, not array... the scroll position goes from top to bottom, if it is in 0 position (top), after load -2 -1 , it will still be in scroll 0, but now, it will be showing -2 element.
Resolving this in array... would be weird, I think that if people want to use scrollup function to load elements they will all end up with this issue.
Thanks anyway, I'll try to implement it through array manipulation! 👍
from ngx-infinite-scroll.
I am having the same issue. I have updated the example plunkr, to demonstrate the issue.
https://plnkr.co/edit/n7iqb2Ugv6tQv1DF2SX2?p=preview
When scrolling up, I am basically adding the items to the array, by using the unshift command.
[0, 1, 2]
array.unshift(-1)
[-1, 0, 1, 2]
array.unshift(-2)
[-2, -1, 0, 1, 2]
etc.
It looks like when you do it like this, the scroll jumps automatically to the first element in the array. I am not sure if this is related to this module or to the implementation of ngFor.
from ngx-infinite-scroll.
Suggested fix: (angular2-infinite-scroll lines 89-106)
InfiniteScroll.prototype.onScrollDown = function (data) {
var _this = this;
if (data === void 0) {
data = { currentScrollPosition: 0 };
}
this.zone.run(function () {
return _this.scrolled.emit(data);
});
};
InfiniteScroll.prototype.onScrollUp = function (data) {
var _this = this;
if (data === void 0) {
data = { currentScrollPosition: 0 };
}
this.zone.run(function () {
return _this.scrolledUp.emit(data);
});
};
When scrolling down, I believe currentScrollPosition (for instance might be) 80 of 100. Then new data is added, now currentScrollPosition is 80 of 120. The scroll bar is placed in the right position.
When scrolling up, currentScrollPostion might be 20 of 100. Then new data is added, and current ScrollPosition is still 20 of 120 when it should be 40 of 120 to maintain it's position.
Note: I added this comment into item #114 as well.
from ngx-infinite-scroll.
I was not liking the action of my down scroll so I changed the 'scroll distance' from 2 to 3. When I did this, the up scroll started working as it is supposed to. This was a big win for me because I had nightmares of how I was going to fix it. Try this adjustment to see if it will help your scrolling up.
Thanks
from ngx-infinite-scroll.
Is there any updates on this issue?
from ngx-infinite-scroll.
@mackelito not on the lib side.
from ngx-infinite-scroll.
@Perezmarc this lib now supports scroll up - please try again (you may look at the /example directory).
please reopen if this issue is different - or rather open an new issue linked to this one.
from ngx-infinite-scroll.
Related Issues (20)
- Support Angular@15
- Are you still maintaining this library? HOT 2
- Can ngx-infinite-scroll work with mat-select / mat-option HOT 1
- Shipping without @scarf/scarf HOT 1
- Angular v16 support HOT 3
- Facing issue in ngx-infinite-scroll version 16.0.0 HOT 2
- error NG6002: 'InfiniteScrollModule' does not appear to be an NgModule class. HOT 5
- Scroll events not fired when using Chrome devtools device mode
- Adding new standalone APIs HOT 1
- Scroll events not fired with angular 16 HOT 2
- Repeated events onScrollDown HOT 1
- Trigger event of no scrollbar is present HOT 2
- Upgrade to Angular 17 ? HOT 8
- After reloading the data, the scrolling event becomes invalid HOT 1
- List jumping when new items are loaded HOT 1
- Infinite scroll doesnt reset to top on route change
- console warning "violation 'settimeout' handler took n ms" coming multiple times
- Angular 18 support for ngx-infinite-scroll HOT 2
- InfiniteScrollModule is deprecated ? angular 18, ngx-infinite-scroll 18 HOT 1
- Add ability to set at least px to infiniteScrollDistance
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-infinite-scroll.