cause of jumping when reaching the top and having a lower limit

[tylkomat]

The Line 166 in src/modules/viewport.js causes the jumping.

When having a limit of index 1 as the top then the mentioned line forces a padding to be added to viewport.scrollTop, since paddingHeight is negative. This scrolls the viewport down again, while the user scrolls up, which causes the jumping.

When this line is removed everything works as expected when having a lower limit. On the other hand without a lower limit, ui-scroll will fetch new items indefinitely.

There should be a check which only executes that line when the beginning (buffer.bof === false) was not reached.

[dhilt]

@tylkomat Thanks for your participation! I'm trying to reproduce the issue and I can't. We have a demo which emulates remote server and provides start index progammable option (demo, sources) – it would be great if you could break it or give some another repro. I need to see wrong behaviour to be able to cover it with tests.

[mamacasc]

Thanks for looking at this. I’ve been looking at your code to see what may be different. I see that I’ve been incrementing my own index (ctrl.nextIndex) instead of using the index received in the get function, so I’m going to change that. But I don’t understand what it means when I get a negative index, and what the code should do when that happens. If you could explain that it might help me work this out. Thanks! From: Denis Alexanov [mailto:notifications@github.com] Sent: August 16, 2017 9:16 AM To: angular-ui/ui-scroll <ui-scroll@noreply.github.com> Cc: Subscribed <subscribed@noreply.github.com> Subject: Re: [angular-ui/ui-scroll] cause of jumping when reaching the top and having a lower limit (#172) @tylkomat<https://github.com/tylkomat> Thanks for your participation! I'm trying to reproduce the issue and I can't. We have a demo which emulates remote server and provides start index progammable option (demo<https://rawgit.com/angular-ui/ui-scroll/master/demo/remote/remote.html>, sources<https://github.com/angular-ui/ui-scroll/tree/master/demo/remote>) – it would be great if you could break it or give some another repro. I need to see wrong behaviour to be able to cover it with tests. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<#172 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AVUovzVLgUUNYLhou2_lyV2tMiN-7jc_ks5sYxXWgaJpZM4ObP3X>.

…

________________________________ Please consider the environment before printing this e-mail. The information contained in this communication is confidential and is intended only for the use of the addressee. Furthermore, employees of Sunquest are expressly required not to make defamatory statements and not to infringe or authorize any infringement of copyright or any other legal right by email communications. Any such communication is contrary to Company policy and outside the scope of the employment of the individual concerned. The Company will not accept any liability in respect of such communication, and the employee responsible will be personally liable for any damages or other liability arising. Employees who receive such an email must notify their manager immediately.

________________________________ [http://www.sunquestinfo.com/images/uploads/CMS/611/sug-2017-banner-800x600-rebrand__main.png] Register today<https://community.sunquestinfo.com/EventRegistrationForm?Id=a1P39000003hzvNEAQ&retUrl=/apex/EventDetail%3FId=a1P39000003hzvNEAQ> for SUG 2017 | August 20-24 at the Westin La Paloma, Tucson, AZ

________________________________ Please consider the environment before printing this e-mail. The information contained in this communication is confidential and is intended only for the use of the addressee. Unauthorized use, disclosure or copying of this communication or any part thereof is strictly prohibited and may be unlawful. If you have received this communication in error, please notify us immediately by return e-mail or by e-mail to emailnotify@sunquestinfo.com, and destroy this communication and all copies thereof, including all attachments. E-mail transmissions are not guaranteed to be secure or error free and sender does not accept liability for such errors or omissions. Sunquest Information Systems (Europe) Ltd is registered in England and Wales: 03095468; Coombe Farm Coombe Lane, Naphill, High Wycombe, Bucks, HP14 4QR.

[dhilt]

@mamacasc Let's say we have the log

requested index = 1, count = 10, resolved 10 items
requested index = 11, count = 10, resolved 10 items
requested index = -9, count = 10, resolved 0 items

As the scroller is initialized (or reloaded) it starts requesting items starting from the item with index = 1. First and second requests were to fill the viewport from top (1) to bottom (20). Let's say that 20 items have height = H1 while the viewport has height = H2 and H1 - H2 < paddingHeight, where paddingHeight is internal ui-scroll parameter to provide a viewport buffer space. See the doc related to padding parameter. And the third request was to fill the top viewport buffer space which height is also equal to paddingHeight. But still our dataset has no negative indexes, third request returns no data.

You don't need to do any special things with this. If your dataset has items with negative indexes, scroller will take them at the right time.

[tylkomat]

@dhilt The jumping happens in the repo I gave you before. On the main page (/list) just scroll down some items until the buffer fetches the next bunch and scroll up slowly and you'll notice a jumping (your scroll gets pushed down a little bit while you are scrolling up).

It may be due to the datasource that I use. I haven't yet been able to produce a simpler example, but I'm not the first one to report such kind of problem.

My solution does not break other examples. It only uses what is already there. When scrolling down this behaviour is already in place, when reaching the end (datasource gives less items back than requested) buffer.eof is set to true and no more items are requested. This was not in place for scrolling up, while buffer.bof is set, but not used. The merge request implements that behaviour and disables loading additional items when the top (datasource gives less items than requested) was reached.

[dhilt]

@tylkomat The ui-scroll directive gives a number of ways of usage, it does not push you into some strict boundaries, but also it requires to be more careful. Your code is too complicated and I'm still not able to identify the issue with your demo. For example, I replaced

<div ui-scroll="item in listDatasource" adapter="adapter">
  <a ui-sref=".single({index: item})" ng-bind="item" persist-scroll-position="getSetStartIndexCallback(item)"></a>
</div>

with just

<div ui-scroll="item in listDatasource" adapter="adapter"> {{item}} </div>

and all looks fine. Then I went further and returned a container with ui-sref and removed margin: 5px from layout.css. And again it looks ok. So I incline to the opinion that the cause of your problem is so-called margin collapsing. We have an issue on the GitHub: #39. Please try to reskin your grid without inner margins, hope it helps.

[mamacasc]

I’m now using the index received in the get function, but all of my array items are loading. My console.log entries show the get function is called continuously, with index incrementing properly, until all items are loaded, but I haven’t scrolled at all. If the scroll engine is determining whether to return something based on the height of the viewport and the height of the items, then perhaps it has something to do with the padding. Can you point me to the padding doc you mentioned? Also, in your examples I don’t see buffer-size being set as an attribute. So how does count get valued? Thanks again. From: Denis Alexanov [mailto:notifications@github.com] Sent: August 16, 2017 6:59 PM To: angular-ui/ui-scroll <ui-scroll@noreply.github.com> Cc: Casciato, Julie <Julie.Casciato@sunquestinfo.com>; Mention <mention@noreply.github.com> Subject: Re: [angular-ui/ui-scroll] cause of jumping when reaching the top and having a lower limit (#172) @mamacasc<https://github.com/mamacasc> Let's say we have the log requested index = 1, count = 10, resolved 10 items requested index = 11, count = 10, resolved 10 items requested index = -9, count = 10, resolved 0 items As the scroller is initialized (or reloaded) it starts requesting items starting from the item with index = 1. First and second requests were to fill the viewport from top (1) to bottom (20). Let's say that 20 items have height = H1 while the viewport has height = H2 and H1 - H2 < paddingHeight, where paddingHeight is internal ui-scroll parameter to provide a viewport buffer space. See the doc related to padding parameter. And the third request was to fill the top viewport buffer space which height is also equal to paddingHeight. But still our dataset has no negative indexes, third request returns no data. You don't need to do any special things with this. If your dataset has items with negative indexes, scroller will take them at the right time. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#172 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AVUovym-qO-FnKQ7MVpETRoIoI5I-Wr2ks5sY55vgaJpZM4ObP3X>.

…

________________________________ Please consider the environment before printing this e-mail. The information contained in this communication is confidential and is intended only for the use of the addressee. Furthermore, employees of Sunquest are expressly required not to make defamatory statements and not to infringe or authorize any infringement of copyright or any other legal right by email communications. Any such communication is contrary to Company policy and outside the scope of the employment of the individual concerned. The Company will not accept any liability in respect of such communication, and the employee responsible will be personally liable for any damages or other liability arising. Employees who receive such an email must notify their manager immediately.

________________________________ [http://www.sunquestinfo.com/images/uploads/CMS/611/sug-2017-banner-800x600-rebrand__main.png] Register today<https://community.sunquestinfo.com/EventRegistrationForm?Id=a1P39000003hzvNEAQ&retUrl=/apex/EventDetail%3FId=a1P39000003hzvNEAQ> for SUG 2017 | August 20-24 at the Westin La Paloma, Tucson, AZ

________________________________ Please consider the environment before printing this e-mail. The information contained in this communication is confidential and is intended only for the use of the addressee. Unauthorized use, disclosure or copying of this communication or any part thereof is strictly prohibited and may be unlawful. If you have received this communication in error, please notify us immediately by return e-mail or by e-mail to emailnotify@sunquestinfo.com, and destroy this communication and all copies thereof, including all attachments. E-mail transmissions are not guaranteed to be secure or error free and sender does not accept liability for such errors or omissions. Sunquest Information Systems (Europe) Ltd is registered in England and Wales: 03095468; Coombe Farm Coombe Lane, Naphill, High Wycombe, Bucks, HP14 4QR.

[dhilt]

@mamacasc

The doc (Readme). uiScroll directive. Parameters:

padding - expression, optional - extra height added to the visible area for the purpose of determining when the items should be created/destroyed. The value is relative to the visible height of the area, the default is 0.5 and the minimal value is 0.3.

So you may not set this parameter, it has the default value. But this is important part of the engine.

Post somewhere the repro of your issue (plunker, jsfiddle, whatever), I will take a look. Or just take one of our examples and adjust it step by step to satisfy your needs.

[mamacasc]

By ‘examples’ do you mean the Scroller Examples? I’ve looked at them but don’t see where I can access the code for each demo. Am I in the right place? From: Denis Alexanov [mailto:notifications@github.com] Sent: August 17, 2017 9:19 AM To: angular-ui/ui-scroll <ui-scroll@noreply.github.com> Cc: Casciato, Julie <Julie.Casciato@sunquestinfo.com>; Mention <mention@noreply.github.com> Subject: Re: [angular-ui/ui-scroll] cause of jumping when reaching the top and having a lower limit (#172) @mamacasc<https://github.com/mamacasc> The doc (Readme). uiScroll directive. Parameters: padding - expression, optional - extra height added to the visible area for the purpose of determining when the items should be created/destroyed. The value is relative to the visible height of the area, the default is 0.5 and the minimal value is 0.3. So you may not set this parameter, it has the default value. But this is important part of the engine. Post somewhere the repro of your issue (plunker, jsfiddle, whatever), I will take a look. Or just take one of our examples and adjust it step by step to satisfy your needs. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#172 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AVUov4qxlv5XLzCVzXwrX5V_CsiG7UZ2ks5sZGf1gaJpZM4ObP3X>.

…

________________________________ Please consider the environment before printing this e-mail. The information contained in this communication is confidential and is intended only for the use of the addressee. Furthermore, employees of Sunquest are expressly required not to make defamatory statements and not to infringe or authorize any infringement of copyright or any other legal right by email communications. Any such communication is contrary to Company policy and outside the scope of the employment of the individual concerned. The Company will not accept any liability in respect of such communication, and the employee responsible will be personally liable for any damages or other liability arising. Employees who receive such an email must notify their manager immediately.

________________________________ [http://www.sunquestinfo.com/images/uploads/CMS/611/sug-2017-banner-800x600-rebrand__main.png] Register today<https://community.sunquestinfo.com/EventRegistrationForm?Id=a1P39000003hzvNEAQ&retUrl=/apex/EventDetail%3FId=a1P39000003hzvNEAQ> for SUG 2017 | August 20-24 at the Westin La Paloma, Tucson, AZ

________________________________ Please consider the environment before printing this e-mail. The information contained in this communication is confidential and is intended only for the use of the addressee. Unauthorized use, disclosure or copying of this communication or any part thereof is strictly prohibited and may be unlawful. If you have received this communication in error, please notify us immediately by return e-mail or by e-mail to emailnotify@sunquestinfo.com, and destroy this communication and all copies thereof, including all attachments. E-mail transmissions are not guaranteed to be secure or error free and sender does not accept liability for such errors or omissions. Sunquest Information Systems (Europe) Ltd is registered in England and Wales: 03095468; Coombe Farm Coombe Lane, Naphill, High Wycombe, Bucks, HP14 4QR.

[dhilt]

@mamacasc The demos code is in the repository: https://github.com/angular-ui/ui-scroll/tree/master/demo. Clone the repo and try it via npm start on localhost:5005.

[mamacasc]

Took me awhile but I have a Plunker<https://plnkr.co/edit/hOYi7XQNOAoCyOFXsoIE> that reproduces the problem. I have ui-scroll defined with a buffer-size of 10. My console log shows that the get method is called continuously (until you stop plunker), with the index incrementing by 10 each time. You’ll see that I’m using an Angular component rather than a directive, as that is how our app is defined – don’t know if that makes any difference. I’m sure I’m missing something simple. From: Denis Alexanov [mailto:notifications@github.com] Sent: August 17, 2017 10:12 AM To: angular-ui/ui-scroll <ui-scroll@noreply.github.com> Cc: Casciato, Julie <Julie.Casciato@sunquestinfo.com>; Mention <mention@noreply.github.com> Subject: Re: [angular-ui/ui-scroll] cause of jumping when reaching the top and having a lower limit (#172) @mamacasc<https://github.com/mamacasc> The demos code is in the repository: https://github.com/angular-ui/ui-scroll/tree/master/demo. Clone the repo and try it via npm start on localhost:5005. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#172 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AVUov4ZW6g6-lJAWtbEcgn4CiQov7cc2ks5sZHRVgaJpZM4ObP3X>.

…

________________________________ Please consider the environment before printing this e-mail. The information contained in this communication is confidential and is intended only for the use of the addressee. Furthermore, employees of Sunquest are expressly required not to make defamatory statements and not to infringe or authorize any infringement of copyright or any other legal right by email communications. Any such communication is contrary to Company policy and outside the scope of the employment of the individual concerned. The Company will not accept any liability in respect of such communication, and the employee responsible will be personally liable for any damages or other liability arising. Employees who receive such an email must notify their manager immediately.

________________________________ [http://www.sunquestinfo.com/images/uploads/CMS/611/sug-2017-banner-800x600-rebrand__main.png] Register today<https://community.sunquestinfo.com/EventRegistrationForm?Id=a1P39000003hzvNEAQ&retUrl=/apex/EventDetail%3FId=a1P39000003hzvNEAQ> for SUG 2017 | August 20-24 at the Westin La Paloma, Tucson, AZ

________________________________ Please consider the environment before printing this e-mail. The information contained in this communication is confidential and is intended only for the use of the addressee. Unauthorized use, disclosure or copying of this communication or any part thereof is strictly prohibited and may be unlawful. If you have received this communication in error, please notify us immediately by return e-mail or by e-mail to emailnotify@sunquestinfo.com, and destroy this communication and all copies thereof, including all attachments. E-mail transmissions are not guaranteed to be secure or error free and sender does not accept liability for such errors or omissions. Sunquest Information Systems (Europe) Ltd is registered in England and Wales: 03095468; Coombe Farm Coombe Lane, Naphill, High Wycombe, Bucks, HP14 4QR.

[dhilt]

@mamacasc Plunker is great, it saves our time! I forked it and made a short fix: https://plnkr.co/edit/EUznlF0ynxJK1ptkAZEG?p=preview. You had a problem with the viewport's height, which must be constrained according to the documentation.

[mamacasc]

Well that certainly helped with the Plunker – it is definitely our friend. But I have a problem with my real app because height is not set in pixels – it is set in percentages (e.g. 100%) or relative units (vh). Is ui-scroll going to work if height is defined that way? My results have to display in the lowest of a set of nested views and I’ve tried moving the viewport to each view with no luck. Is there a way to make that work? From: Denis Alexanov [mailto:notifications@github.com] Sent: August 18, 2017 5:06 PM To: angular-ui/ui-scroll <ui-scroll@noreply.github.com> Cc: Casciato, Julie <Julie.Casciato@sunquestinfo.com>; Mention <mention@noreply.github.com> Subject: Re: [angular-ui/ui-scroll] cause of jumping when reaching the top and having a lower limit (#172) @mamacasc<https://github.com/mamacasc> Plunker is great, it saves our time! I forked it and made a short fix: https://plnkr.co/edit/EUznlF0ynxJK1ptkAZEG?p=preview. You had a problem with the viewport's height, which must be constrained according to the documentation. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#172 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AVUov3dderZfSHnXlP4w0GrlJxNm_Ge2ks5sZicBgaJpZM4ObP3X>.

…

________________________________ Please consider the environment before printing this e-mail. The information contained in this communication is confidential and is intended only for the use of the addressee. Furthermore, employees of Sunquest are expressly required not to make defamatory statements and not to infringe or authorize any infringement of copyright or any other legal right by email communications. Any such communication is contrary to Company policy and outside the scope of the employment of the individual concerned. The Company will not accept any liability in respect of such communication, and the employee responsible will be personally liable for any damages or other liability arising. Employees who receive such an email must notify their manager immediately.

[mamacasc]

I’m still plugging away at this. I put the ui-scroll-viewport directive on a <div> where it does work right – for the first batch. As soon as I scroll to the bottom, however, it gets in a loop where it alternates between fetching the next 50 and then the previous 50 (I’ve set buffer-size to 50). I haven’t been able to recreate this in Plunker, so what I can offer is the result of console.log messages. I’m logging in 3 places: at the top of my ‘get’ function (Index=* count=*), and in ui-scroll.js “in fetchNext” and “In fetchPrevious”. Here’s what the log shows: In fetchNext In get: Index=1 count=50 In fetchPrevious In get: Index= -49 count=50 <== this is where it ends after the first batch is loaded, before I scroll. Then I scroll, just to the bottom and let go of the mouse, but it gets in a loop and continues until I kill the window: In fetchNext In get: index = 51 count=50 In fetchPrevious In get: Index = 1 count=50 In fetchNext In get: Index = 51 count = 50 In fetchPrevious In get: Index = 1 count=50 In fetchNext In get: Index = 51 count = 50 In fetchPrevious In get: Index = 1 count=50 In fetchNext In get: Index = 51 count = 50 : (etc.) The Plunker<https://plnkr.co/edit/hOYi7XQNOAoCyOFXsoIE?p=preview> has the same code that I’m using in my component, but it only fetches one batch each time I scroll, instead of getting in a loop with the first scroll. Any ideas would be welcome. Thanks, Julie From: Casciato, Julie Sent: August 21, 2017 9:58 AM To: 'angular-ui/ui-scroll' <reply@reply.github.com>; angular-ui/ui-scroll <ui-scroll@noreply.github.com> Cc: Mention <mention@noreply.github.com> Subject: RE: [angular-ui/ui-scroll] cause of jumping when reaching the top and having a lower limit (#172) Well that certainly helped with the Plunker – it is definitely our friend. But I have a problem with my real app because height is not set in pixels – it is set in percentages (e.g. 100%) or relative units (vh). Is ui-scroll going to work if height is defined that way? My results have to display in the lowest of a set of nested views and I’ve tried moving the viewport to each view with no luck. Is there a way to make that work? From: Denis Alexanov [mailto:notifications@github.com] Sent: August 18, 2017 5:06 PM To: angular-ui/ui-scroll <ui-scroll@noreply.github.com<mailto:ui-scroll@noreply.github.com>> Cc: Casciato, Julie <Julie.Casciato@sunquestinfo.com<mailto:Julie.Casciato@sunquestinfo.com>>; Mention <mention@noreply.github.com<mailto:mention@noreply.github.com>> Subject: Re: [angular-ui/ui-scroll] cause of jumping when reaching the top and having a lower limit (#172) @mamacasc<https://github.com/mamacasc> Plunker is great, it saves our time! I forked it and made a short fix: https://plnkr.co/edit/EUznlF0ynxJK1ptkAZEG?p=preview. You had a problem with the viewport's height, which must be constrained according to the documentation. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#172 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AVUov3dderZfSHnXlP4w0GrlJxNm_Ge2ks5sZicBgaJpZM4ObP3X>.

…

________________________________ Please consider the environment before printing this e-mail. The information contained in this communication is confidential and is intended only for the use of the addressee. Furthermore, employees of Sunquest are expressly required not to make defamatory statements and not to infringe or authorize any infringement of copyright or any other legal right by email communications. Any such communication is contrary to Company policy and outside the scope of the employment of the individual concerned. The Company will not accept any liability in respect of such communication, and the employee responsible will be personally liable for any damages or other liability arising. Employees who receive such an email must notify their manager immediately.