Repository navigation
feat: add ionEnd event to refresher #24524
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already include this feature request, without success.
Describe the Feature Request
I would like the refresher to have an ionEnd event.
I need to know when the refresher has returned to the inactive state to do some jiggery-pokery with my backgrounds. But watching the refresher progress isn’t good enough because hitting zero doesn’t necessarily mean the user has completed the pull gesture. So, I need to know both when the user is no longer touching the screen AND when the refresher is ready to be pulled again.
I'll have a PR to look at shortly.
Describe the Use Case
I have a background that bleeds from the header to the content (it looks like one continuous image before you scroll). When I scroll the content up, the bg that's in the content should scroll up under the header along with the content.
But when I pull down to refresh, I don't want the background in the content to separate from the header and leave a gap. I just want the content to move down.
I have a few solutions for this. One of them involves having two bgs in different places and swapping their visibility based on when the user is interacting with the refresher.
Watching the progress doesn't quite work, while having an ionEnd event should.
Describe Preferred Solution
No response
Describe Alternatives
No response
Related Code
The issue can be seen in the "BG Swap" page of this Ionic application.
https://github.com/WhatsThatItsPat/pull-to-refresh-with-bg
Additional Information
No response
Activity
ionitron-bot commentedon Jan 6, 2022
Thanks for the issue! This issue has been labeled as
holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.
Thank you!
liamdebeasi commentedon Jan 7, 2022
Thanks for the issue. For the problem you described, is that something you would expect Ionic to handle automatically? If so, it might be better to address that issue rather than add an API to workaround the behavior.
WhatsThatItsPat commentedon Jan 7, 2022
Thanks for taking a look at my issue.
I'm not sure if Ionic should do this automatically. There are multiple things in the way of getting the background(s) and refresher working together the way our design calls for.
When I try to use the
--backgroundcustom property, it looks like the background shadow part doesn't know the height of the scrolling content. Its height ends up as 100% of the window and doesn't / can't scroll. And usingbackground-attachmentsettings don't do anything because of this, and/or because the background and content are in separate places.If I use css to put a background on
&::part(scroll)I can get the bg to scroll with the content, though the background will also move down when everything is pulled down with the refresher causing the unwanted separation between header and content background images. The scroll content is aware if its own height here, so I can use it if needed.I can use css to put a background on
ion-content(not using the custom property). Setting its position to absolute keeps it at the top when pulling down. I guess this works because it's separate from the background and scroll parts.If I hack these last two together, I can almost get things working. There's just a minor edge case when deciding to reverse the pull down.
There are also layering issues because when I am able to keep the background at the top during a pull down, the refresher is behind the background. So, this still requires some
z-indextweaking to keep the refresher above the background and below the scrolling content.I was playing around with
setCss()which manipulates the y of the scroll area along with the background. If you take out the background stuff here, it stays at the top when pulling down. You could have a property on the refresher that tells the bg to stay at the top and you'd check if that's set here. But that would just be a different API change. And you'd still have to deal with layering issues, along with telling the bg the height of the content so it can scroll up.On top of all that, the collapsable header is used between the header and the content so keeping the bg of the content stationary in that scenario wouldn't work. I don't need that to work, I'm just bringing up another complication.
It seems that having backgrounds in the header and at the top of the content that match up with one another isn't a standard use case.
WhatsThatItsPat commentedon Jan 24, 2022
I made a brief video which explains my issue and addresses whether Ionic should handle this behavior automatically.
liamdebeasi commentedon Jan 27, 2022
Thanks for the detailed explanations! I discussed this with the team, and we agree that the
ionEndevent would be valuable for Ionic to have.piotr-cz commentedon Jun 7, 2024
There is another case (#29580) where the
ionEndevent would be helpful.In short - it can help with dealing of the side effect on desktop when puling down the refresher makes content text that is below it to be selected
feat(refresher): add ionPullStart and ionPullEnd events
feat(refresher): add ionPullStart and ionPullEnd events
feat(refresher): add ionPullStart and ionPullEnd events (#30946)
ShaneK commentedon Feb 20, 2026
Hey! I have a PR that adds this feature (and has been merged), but I think I forgot to add resolves before it was closed. You can check out the PR here:
#30946
This will be released as part of 8.8, since it's a feature.
ionitron-bot commentedon Mar 22, 2026
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.