javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
ionic-framework/packages/vue
History
Shane 344a43feca feat(infinite-scroll): adding preserveRerenderScrollPosition property (#30566) 
Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Currently, if you use infinite scroll and fully change out elements in
the DOM, you'll lose your scroll position. This can present as a race
condition in some frameworks, like React, but will present pretty
consistently in vanilla JavaScript. This happens because the browser is
removing the old elements from the DOM and adding the new ones, and
during that time the container holding the old elements will shrink and
the browser will adjust the top position to be the maximum of the new
container height.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

With this new property (`preserveRerenderScrollPosition`) set, we will
loop through siblings of the infinite scroll and set their min-heights
to be their current heights before triggering the `ionInfinite` event,
then we clean up after complete is called by restoring their previous
min-heights or setting them to auto if there were none. This prevents
the container from resizing and the browser from losing the scroll
position.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

**Current dev build**: 
```
8.6.6-dev.11753719591.13a5c65f
```
2025-07-30 10:23:00 -07:00
..
scripts
fix(vue): update Stencil Vue output target (#30159)
2025-01-29 16:31:31 +00:00
src
feat(infinite-scroll): adding preserveRerenderScrollPosition property (#30566)
2025-07-30 10:23:00 -07:00
test
feat(input-otp): add new input-otp component (#30386)
2025-05-29 15:10:37 -04:00
types
feat(slides): remove ion-slide, ion-slides, and IonicSwiper module (#25868)
2022-09-01 14:36:17 -05:00
.eslintignore
chore(vue): add eslint and prettier (#26635)
2023-01-18 18:29:25 -05:00
.eslintrc.js
chore(vue): add eslint and prettier (#26635)
2023-01-18 18:29:25 -05:00
.prettierignore
chore(vue): add eslint and prettier (#26635)
2023-01-18 18:29:25 -05:00
CHANGELOG.md
v8.6.5
2025-07-16 19:53:16 +00:00
package-lock.json
chore(): update package lock files
2025-07-16 19:53:50 +00:00
package.json
v8.6.5
2025-07-16 19:53:16 +00:00
README.md
docs(many): update Contributing links (#29498)
2024-05-14 19:48:36 +00:00
rollup.config.mjs
fix(vue): update Stencil Vue output target (#30159)
2025-01-29 16:31:31 +00:00
tsconfig.json
fix(vue): update Stencil Vue output target (#30159)
2025-01-29 16:31:31 +00:00

README.md

@ionic/vue

Ionic Framework integration for Vue 3 apps.

Building

  1. Install dependencies in @ionic/core:
cd core && npm install
  1. Build @ionic/core. This will generate Vue component bindings in the packages/vue directory:
npm run build
  1. Install dependencies in @ionic/vue:
cd packages/vue && npm install
  1. Build @ionic/vue:
npm run build
  1. Install dependencies in @ionic/vue-router:
cd packages/vue-router && npm install
  1. Build @ionic/vue-router:
npm run build

Tests

  • E2E Tests are found in the packages/vue/test/base/tests directory and use Cypress.
  • When making changes to @ionic/vue or @ionic/vue-router you can run npm run sync in the test-app directory to ensure that the test application is using your built changes. Be sure to build in the vue and vue-router directories first.
  • Tests can be run in headless mode by running npm run cypress.
  • If you want to open the Cypress test runner, you can run node_modules/.bin/cypress open.
  • Bug fix and feature PRs should have new tests verifying the PR functionality.

Contributing

See our Contributing Guide.

Need Help?

Post your question on the Ionic Forum.