Adapt default logic to adjust scroll position only on backward scrolling - #1002

Merged
piecyk merged 5 commits into
TanStack:mainfrom
balzdur:main
Jun 9, 2025
Merged

Adapt default logic to adjust scroll position only on backward scrolling#1002
piecyk merged 5 commits into
TanStack:mainfrom
balzdur:main

Conversation

@balzdur

@balzdurbalzdur commented May 14, 2025•
edited
Loading

Copy link
Copy Markdown
Contributor

This change is based on those issues: #910, #562
It tries to implement the idea from this message:

@kmpeeduwee it's default behaviour, can be disabled using shouldAdjustScrollPositionOnItemSizeChange, please checkout docs https://tanstack.com/virtual/latest/docs/api/virtualizer#shouldadjustscrollpositiononitemsizechange

Overall we should change the logic to adjust position only on scrolling backward.

Originally posted by @piecyk in #910

Disclaimer: I'm not an expert of the lib, neither someone used to contribute a lot to open source (and/or on tanstack repositories). In particular, I do not know if this should be considered breaking (since the default behaviour will change) or not.

@changeset-bot

changeset-botBot commented May 14, 2025•
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: c7ef283

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages
NameType
@tanstack/virtual-corePatch
@tanstack/angular-virtualPatch
@tanstack/lit-virtualPatch
@tanstack/react-virtualPatch
@tanstack/solid-virtualPatch
@tanstack/svelte-virtualPatch
@tanstack/vue-virtualPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@nx-cloud

nx-cloudBot commented May 16, 2025•
edited
Loading

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit c7ef283.

CommandStatusDurationResult
nx affected --targets=test:sherif,test:knip,tes...✅ Succeeded2m 25sView ↗
nx run-many --target=build --exclude=examples/**✅ Succeeded17sView ↗

☁️ Nx Cloud last updated this comment at 2025-06-09 12:31:09 UTC

@piecykpiecyk changed the title Adapt default logic to adjust scroll position item size changeAdapt default logic to adjust scroll position only on backward scrollingMay 16, 2025
@pkg-pr-new

pkg-pr-newBot commented May 16, 2025•
edited
Loading

Copy link
Copy Markdown
More templates

@tanstack/angular-virtual

npm i https://pkg.pr.new/@tanstack/angular-virtual@1002

@tanstack/lit-virtual

npm i https://pkg.pr.new/@tanstack/lit-virtual@1002

@tanstack/react-virtual

npm i https://pkg.pr.new/@tanstack/react-virtual@1002

@tanstack/solid-virtual

npm i https://pkg.pr.new/@tanstack/solid-virtual@1002

@tanstack/svelte-virtual

npm i https://pkg.pr.new/@tanstack/svelte-virtual@1002

@tanstack/virtual-core

npm i https://pkg.pr.new/@tanstack/virtual-core@1002

@tanstack/vue-virtual

npm i https://pkg.pr.new/@tanstack/vue-virtual@1002

commit: c7ef283

@piecyk

piecyk commented May 16, 2025

Copy link
Copy Markdown
Collaborator

@balzdur Yeah, I think this makes sense as the default behavior. Adjusting the scroll position only during backward scrolling seems more intuitive and prevents unexpected jumps when resizing items. Regarding the breaking change, good question! It technically changes the default behavior, but I believe it's more of a bug fix than a breaking change since the current behavior is often not what users expect.

@balzdur

balzdur commented Jun 9, 2025

Copy link
Copy Markdown
ContributorAuthor

Is it ok to merge this or do I need to make some stuff ? 🙂

@piecyk
piecyk merged commit b3b7e7d into TanStack:mainJun 9, 2025
@github-actionsgithub-actionsBot mentioned this pull request Jun 9, 2025
Merged
@piecyk

piecyk commented Jun 9, 2025

Copy link
Copy Markdown
Collaborator

@balzdur looks like with this change we broke bidirectional lists, for example, in chat apps where scrolling upward loads older messages. Even without actively scrolling, we should stay in the same place after new elements are loaded. See this related discussion: #1013 (reply in thread)

@diogowbrito

diogowbrito commented Jun 18, 2025

Copy link
Copy Markdown

@piecyk heads up that after updating Tanstack Virtual minor version (which includes this change), we noticed a different scrolling behavior in our application. We have a scenario in which we scroll to the bottom of the table and that stopped working properly (the list was no longer scrolling all the way to the bottom, leaving a few rows left to display. Our list loads data asynchronously (I'd say similarly to the bidirectional lists you mentioned in last comment).

This should have likely been included as a minor version update, instead of a bug fix, due to the behavior change.

Thanks for all the work!

@piecyk

piecyk commented Jun 23, 2025

Copy link
Copy Markdown
Collaborator

@diogowbrito Hey, sorry for the hassle this caused, I appreciate you pointing it out. You're right, this change introduced a behavioral shift that probably should’ve gone out as a minor version instead. I’ll go ahead and revert it to avoid breaking existing use cases.

piecyk added a commit to piecyk/virtual that referenced this pull request Jun 23, 2025
@piecyk
Revert "Adapt default logic to adjust scroll position only on backwar…
ae7f1c0
…d scrolling (TanStack#1002)"
This reverts commit b3b7e7d.
piecyk added a commit that referenced this pull request Jun 23, 2025
@piecyk
Revert "Adapt default logic to adjust scroll position only on backwar…
73fa867
…d scrolling (#1002)" (#1026)
@github-actionsgithub-actionsBot mentioned this pull request Jun 23, 2025
Merged
@coderabbitaicoderabbitaiBot mentioned this pull request Jun 11, 2026
Merged
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@balzdur@piecyk@diogowbrito
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Adapt default logic to adjust scroll position only on backward scrolling - #1002
Merged
piecyk merged 5 commits into
TanStack:mainfrom 
balzdur:main
Jun 9, 2025
Merged
Adapt default logic to adjust scroll position only on backward scrolling#1002
piecyk merged 5 commits into
TanStack:mainfrom 
balzdur:main
Conversation
@balzdur
@balzdurbalzdur
commented
May 14, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
This change is based on those issues: #910, #562

It tries to implement the idea from this message:
@kmpeeduwee it's default behaviour, can be disabled using shouldAdjustScrollPositionOnItemSizeChange, please checkout docs https://tanstack.com/virtual/latest/docs/api/virtualizer#shouldadjustscrollpositiononitemsizechange
Overall we should change the logic to adjust position only on scrolling backward.
Originally posted by @piecyk in #910
Disclaimer: I'm not an expert of the lib, neither someone used to contribute a lot to open source (and/or on tanstack repositories). In particular, I do not know if this should be considered breaking (since the default behaviour will change) or not.
@changeset-bot
changeset-botBot
commented
May 14, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: c7ef283
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 7 packages
NameType
@tanstack/virtual-corePatch
@tanstack/angular-virtualPatch
@tanstack/lit-virtualPatch
@tanstack/react-virtualPatch
@tanstack/solid-virtualPatch
@tanstack/svelte-virtualPatch
@tanstack/vue-virtualPatch
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
@nx-cloud
nx-cloudBot
commented
May 16, 2025•

edited

Loading

Copy link


Copy Markdown

View your CI Pipeline Execution ↗ for commit c7ef283.
CommandStatusDurationResult
nx affected --targets=test:sherif,test:knip,tes...✅ Succeeded2m 25sView ↗
nx run-many --target=build --exclude=examples/**✅ Succeeded17sView ↗
☁️ Nx Cloud last updated this comment at 2025-06-09 12:31:09 UTC
@piecykpiecyk
changed the title
Adapt default logic to adjust scroll position item size changeAdapt default logic to adjust scroll position only on backward scrollingMay 16, 2025
@pkg-pr-new
pkg-pr-newBot
commented
May 16, 2025•

edited

Loading

Copy link


Copy Markdown

More templates
@tanstack/angular-virtual
npm i https://pkg.pr.new/@tanstack/angular-virtual@1002

@tanstack/lit-virtual
npm i https://pkg.pr.new/@tanstack/lit-virtual@1002

@tanstack/react-virtual
npm i https://pkg.pr.new/@tanstack/react-virtual@1002

@tanstack/solid-virtual
npm i https://pkg.pr.new/@tanstack/solid-virtual@1002

@tanstack/svelte-virtual
npm i https://pkg.pr.new/@tanstack/svelte-virtual@1002

@tanstack/virtual-core
npm i https://pkg.pr.new/@tanstack/virtual-core@1002

@tanstack/vue-virtual
npm i https://pkg.pr.new/@tanstack/vue-virtual@1002

commit: c7ef283
@piecyk
piecyk
commented
May 16, 2025

Copy link


Copy Markdown

Collaborator
@balzdur Yeah, I think this makes sense as the default behavior. Adjusting the scroll position only during backward scrolling seems more intuitive and prevents unexpected jumps when resizing items. Regarding the breaking change, good question! It technically changes the default behavior, but I believe it's more of a bug fix than a breaking change since the current behavior is often not what users expect.
@balzdur
balzdur
commented
Jun 9, 2025

Copy link


Copy Markdown

ContributorAuthor
Is it ok to merge this or do I need to make some stuff ? 🙂
@piecyk
piecyk
merged commit b3b7e7d
into
TanStack:mainJun 9, 2025
@github-actionsgithub-actionsBot
mentioned this pull request
Jun 9, 2025
 Merged

@piecyk
piecyk
commented
Jun 9, 2025

Copy link


Copy Markdown

Collaborator
@balzdur looks like with this change we broke bidirectional lists, for example, in chat apps where scrolling upward loads older messages. Even without actively scrolling, we should stay in the same place after new elements are loaded. See this related discussion: #1013 (reply in thread)
@diogowbrito
diogowbrito
commented
Jun 18, 2025

Copy link


Copy Markdown

@piecyk heads up that after updating Tanstack Virtual minor version (which includes this change), we noticed a different scrolling behavior in our application. We have a scenario in which we scroll to the bottom of the table and that stopped working properly (the list was no longer scrolling all the way to the bottom, leaving a few rows left to display. Our list loads data asynchronously (I'd say similarly to the bidirectional lists you mentioned in last comment).
This should have likely been included as a minor version update, instead of a bug fix, due to the behavior change.
Thanks for all the work!
@piecyk
piecyk
commented
Jun 23, 2025

Copy link


Copy Markdown

Collaborator
@diogowbrito Hey, sorry for the hassle this caused, I appreciate you pointing it out. You're right, this change introduced a behavioral shift that probably should’ve gone out as a minor version instead. I’ll go ahead and revert it to avoid breaking existing use cases.
piecyk added a commit
to piecyk/virtual
that referenced
this pull request
Jun 23, 2025
@piecyk
Revert "Adapt default logic to adjust scroll position only on backwar…
ae7f1c0
…d scrolling (TanStack#1002)"
This reverts commit b3b7e7d.
piecyk added a commit
that referenced
this pull request
Jun 23, 2025
@piecyk
Revert "Adapt default logic to adjust scroll position only on backwar…
73fa867
…d scrolling (#1002)" (#1026)
@github-actionsgithub-actionsBot
mentioned this pull request
Jun 23, 2025
 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jun 11, 2026
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@balzdur@piecyk@diogowbrito

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Adapt default logic to adjust scroll position only on backward scrolling - #1002
Merged
piecyk merged 5 commits into
TanStack:mainfrom 
balzdur:main
Jun 9, 2025
Merged
Adapt default logic to adjust scroll position only on backward scrolling#1002
piecyk merged 5 commits into
TanStack:mainfrom 
balzdur:main
Conversation
@balzdur
@balzdurbalzdur
commented
May 14, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
This change is based on those issues: #910, #562

It tries to implement the idea from this message:
@kmpeeduwee it's default behaviour, can be disabled using shouldAdjustScrollPositionOnItemSizeChange, please checkout docs https://tanstack.com/virtual/latest/docs/api/virtualizer#shouldadjustscrollpositiononitemsizechange
Overall we should change the logic to adjust position only on scrolling backward.
Originally posted by @piecyk in #910
Disclaimer: I'm not an expert of the lib, neither someone used to contribute a lot to open source (and/or on tanstack repositories). In particular, I do not know if this should be considered breaking (since the default behaviour will change) or not.
@changeset-bot
changeset-botBot
commented
May 14, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: c7ef283
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 7 packages
NameType
@tanstack/virtual-corePatch
@tanstack/angular-virtualPatch
@tanstack/lit-virtualPatch
@tanstack/react-virtualPatch
@tanstack/solid-virtualPatch
@tanstack/svelte-virtualPatch
@tanstack/vue-virtualPatch
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
@nx-cloud
nx-cloudBot
commented
May 16, 2025•

edited

Loading

Copy link


Copy Markdown

View your CI Pipeline Execution ↗ for commit c7ef283.
CommandStatusDurationResult
nx affected --targets=test:sherif,test:knip,tes...✅ Succeeded2m 25sView ↗
nx run-many --target=build --exclude=examples/**✅ Succeeded17sView ↗
☁️ Nx Cloud last updated this comment at 2025-06-09 12:31:09 UTC
@piecykpiecyk
changed the title
Adapt default logic to adjust scroll position item size changeAdapt default logic to adjust scroll position only on backward scrollingMay 16, 2025
@pkg-pr-new
pkg-pr-newBot
commented
May 16, 2025•

edited

Loading

Copy link


Copy Markdown

More templates
@tanstack/angular-virtual
npm i https://pkg.pr.new/@tanstack/angular-virtual@1002

@tanstack/lit-virtual
npm i https://pkg.pr.new/@tanstack/lit-virtual@1002

@tanstack/react-virtual
npm i https://pkg.pr.new/@tanstack/react-virtual@1002

@tanstack/solid-virtual
npm i https://pkg.pr.new/@tanstack/solid-virtual@1002

@tanstack/svelte-virtual
npm i https://pkg.pr.new/@tanstack/svelte-virtual@1002

@tanstack/virtual-core
npm i https://pkg.pr.new/@tanstack/virtual-core@1002

@tanstack/vue-virtual
npm i https://pkg.pr.new/@tanstack/vue-virtual@1002

commit: c7ef283
@piecyk
piecyk
commented
May 16, 2025

Copy link


Copy Markdown

Collaborator
@balzdur Yeah, I think this makes sense as the default behavior. Adjusting the scroll position only during backward scrolling seems more intuitive and prevents unexpected jumps when resizing items. Regarding the breaking change, good question! It technically changes the default behavior, but I believe it's more of a bug fix than a breaking change since the current behavior is often not what users expect.
@balzdur
balzdur
commented
Jun 9, 2025

Copy link


Copy Markdown

ContributorAuthor
Is it ok to merge this or do I need to make some stuff ? 🙂
@piecyk
piecyk
merged commit b3b7e7d
into
TanStack:mainJun 9, 2025
@github-actionsgithub-actionsBot
mentioned this pull request
Jun 9, 2025
 Merged

@piecyk
piecyk
commented
Jun 9, 2025

Copy link


Copy Markdown

Collaborator
@balzdur looks like with this change we broke bidirectional lists, for example, in chat apps where scrolling upward loads older messages. Even without actively scrolling, we should stay in the same place after new elements are loaded. See this related discussion: #1013 (reply in thread)
@diogowbrito
diogowbrito
commented
Jun 18, 2025

Copy link


Copy Markdown

@piecyk heads up that after updating Tanstack Virtual minor version (which includes this change), we noticed a different scrolling behavior in our application. We have a scenario in which we scroll to the bottom of the table and that stopped working properly (the list was no longer scrolling all the way to the bottom, leaving a few rows left to display. Our list loads data asynchronously (I'd say similarly to the bidirectional lists you mentioned in last comment).
This should have likely been included as a minor version update, instead of a bug fix, due to the behavior change.
Thanks for all the work!
@piecyk
piecyk
commented
Jun 23, 2025

Copy link


Copy Markdown

Collaborator
@diogowbrito Hey, sorry for the hassle this caused, I appreciate you pointing it out. You're right, this change introduced a behavioral shift that probably should’ve gone out as a minor version instead. I’ll go ahead and revert it to avoid breaking existing use cases.
piecyk added a commit
to piecyk/virtual
that referenced
this pull request
Jun 23, 2025
@piecyk
Revert "Adapt default logic to adjust scroll position only on backwar…
ae7f1c0
…d scrolling (TanStack#1002)"
This reverts commit b3b7e7d.
piecyk added a commit
that referenced
this pull request
Jun 23, 2025
@piecyk
Revert "Adapt default logic to adjust scroll position only on backwar…
73fa867
…d scrolling (#1002)" (#1026)
@github-actionsgithub-actionsBot
mentioned this pull request
Jun 23, 2025
 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jun 11, 2026
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@balzdur@piecyk@diogowbrito

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Adapt default logic to adjust scroll position only on backward scrolling - #1002
Merged
piecyk merged 5 commits into
TanStack:mainfrom 
balzdur:main
Jun 9, 2025
Merged
Adapt default logic to adjust scroll position only on backward scrolling#1002
piecyk merged 5 commits into
TanStack:mainfrom 
balzdur:main
Conversation
@balzdur
@balzdurbalzdur
commented
May 14, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
This change is based on those issues: #910, #562

It tries to implement the idea from this message:
@kmpeeduwee it's default behaviour, can be disabled using shouldAdjustScrollPositionOnItemSizeChange, please checkout docs https://tanstack.com/virtual/latest/docs/api/virtualizer#shouldadjustscrollpositiononitemsizechange
Overall we should change the logic to adjust position only on scrolling backward.
Originally posted by @piecyk in #910
Disclaimer: I'm not an expert of the lib, neither someone used to contribute a lot to open source (and/or on tanstack repositories). In particular, I do not know if this should be considered breaking (since the default behaviour will change) or not.
@changeset-bot
changeset-botBot
commented
May 14, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: c7ef283
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 7 packages
NameType
@tanstack/virtual-corePatch
@tanstack/angular-virtualPatch
@tanstack/lit-virtualPatch
@tanstack/react-virtualPatch
@tanstack/solid-virtualPatch
@tanstack/svelte-virtualPatch
@tanstack/vue-virtualPatch
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
@nx-cloud
nx-cloudBot
commented
May 16, 2025•

edited

Loading

Copy link


Copy Markdown

View your CI Pipeline Execution ↗ for commit c7ef283.
CommandStatusDurationResult
nx affected --targets=test:sherif,test:knip,tes...✅ Succeeded2m 25sView ↗
nx run-many --target=build --exclude=examples/**✅ Succeeded17sView ↗
☁️ Nx Cloud last updated this comment at 2025-06-09 12:31:09 UTC
@piecykpiecyk
changed the title
Adapt default logic to adjust scroll position item size changeAdapt default logic to adjust scroll position only on backward scrollingMay 16, 2025
@pkg-pr-new
pkg-pr-newBot
commented
May 16, 2025•

edited

Loading

Copy link


Copy Markdown

More templates
@tanstack/angular-virtual
npm i https://pkg.pr.new/@tanstack/angular-virtual@1002

@tanstack/lit-virtual
npm i https://pkg.pr.new/@tanstack/lit-virtual@1002

@tanstack/react-virtual
npm i https://pkg.pr.new/@tanstack/react-virtual@1002

@tanstack/solid-virtual
npm i https://pkg.pr.new/@tanstack/solid-virtual@1002

@tanstack/svelte-virtual
npm i https://pkg.pr.new/@tanstack/svelte-virtual@1002

@tanstack/virtual-core
npm i https://pkg.pr.new/@tanstack/virtual-core@1002

@tanstack/vue-virtual
npm i https://pkg.pr.new/@tanstack/vue-virtual@1002

commit: c7ef283
@piecyk
piecyk
commented
May 16, 2025

Copy link


Copy Markdown

Collaborator
@balzdur Yeah, I think this makes sense as the default behavior. Adjusting the scroll position only during backward scrolling seems more intuitive and prevents unexpected jumps when resizing items. Regarding the breaking change, good question! It technically changes the default behavior, but I believe it's more of a bug fix than a breaking change since the current behavior is often not what users expect.
@balzdur
balzdur
commented
Jun 9, 2025

Copy link


Copy Markdown

ContributorAuthor
Is it ok to merge this or do I need to make some stuff ? 🙂
@piecyk
piecyk
merged commit b3b7e7d
into
TanStack:mainJun 9, 2025
@github-actionsgithub-actionsBot
mentioned this pull request
Jun 9, 2025
 Merged

@piecyk
piecyk
commented
Jun 9, 2025

Copy link


Copy Markdown

Collaborator
@balzdur looks like with this change we broke bidirectional lists, for example, in chat apps where scrolling upward loads older messages. Even without actively scrolling, we should stay in the same place after new elements are loaded. See this related discussion: #1013 (reply in thread)
@diogowbrito
diogowbrito
commented
Jun 18, 2025

Copy link


Copy Markdown

@piecyk heads up that after updating Tanstack Virtual minor version (which includes this change), we noticed a different scrolling behavior in our application. We have a scenario in which we scroll to the bottom of the table and that stopped working properly (the list was no longer scrolling all the way to the bottom, leaving a few rows left to display. Our list loads data asynchronously (I'd say similarly to the bidirectional lists you mentioned in last comment).
This should have likely been included as a minor version update, instead of a bug fix, due to the behavior change.
Thanks for all the work!
@piecyk
piecyk
commented
Jun 23, 2025

Copy link


Copy Markdown

Collaborator
@diogowbrito Hey, sorry for the hassle this caused, I appreciate you pointing it out. You're right, this change introduced a behavioral shift that probably should’ve gone out as a minor version instead. I’ll go ahead and revert it to avoid breaking existing use cases.
piecyk added a commit
to piecyk/virtual
that referenced
this pull request
Jun 23, 2025
@piecyk
Revert "Adapt default logic to adjust scroll position only on backwar…
ae7f1c0
…d scrolling (TanStack#1002)"
This reverts commit b3b7e7d.
piecyk added a commit
that referenced
this pull request
Jun 23, 2025
@piecyk
Revert "Adapt default logic to adjust scroll position only on backwar…
73fa867
…d scrolling (#1002)" (#1026)
@github-actionsgithub-actionsBot
mentioned this pull request
Jun 23, 2025
 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jun 11, 2026
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@balzdur@piecyk@diogowbrito

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Adapt default logic to adjust scroll position only on backward scrolling - #1002
Merged
piecyk merged 5 commits into
TanStack:mainfrom 
balzdur:main
Jun 9, 2025
Merged
Adapt default logic to adjust scroll position only on backward scrolling#1002
piecyk merged 5 commits into
TanStack:mainfrom 
balzdur:main
Conversation
@balzdur
@balzdurbalzdur
commented
May 14, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
This change is based on those issues: #910, #562

It tries to implement the idea from this message:
@kmpeeduwee it's default behaviour, can be disabled using shouldAdjustScrollPositionOnItemSizeChange, please checkout docs https://tanstack.com/virtual/latest/docs/api/virtualizer#shouldadjustscrollpositiononitemsizechange
Overall we should change the logic to adjust position only on scrolling backward.
Originally posted by @piecyk in #910
Disclaimer: I'm not an expert of the lib, neither someone used to contribute a lot to open source (and/or on tanstack repositories). In particular, I do not know if this should be considered breaking (since the default behaviour will change) or not.
@changeset-bot
changeset-botBot
commented
May 14, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: c7ef283
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 7 packages
NameType
@tanstack/virtual-corePatch
@tanstack/angular-virtualPatch
@tanstack/lit-virtualPatch
@tanstack/react-virtualPatch
@tanstack/solid-virtualPatch
@tanstack/svelte-virtualPatch
@tanstack/vue-virtualPatch
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
@nx-cloud
nx-cloudBot
commented
May 16, 2025•

edited

Loading

Copy link


Copy Markdown

View your CI Pipeline Execution ↗ for commit c7ef283.
CommandStatusDurationResult
nx affected --targets=test:sherif,test:knip,tes...✅ Succeeded2m 25sView ↗
nx run-many --target=build --exclude=examples/**✅ Succeeded17sView ↗
☁️ Nx Cloud last updated this comment at 2025-06-09 12:31:09 UTC
@piecykpiecyk
changed the title
Adapt default logic to adjust scroll position item size changeAdapt default logic to adjust scroll position only on backward scrollingMay 16, 2025
@pkg-pr-new
pkg-pr-newBot
commented
May 16, 2025•

edited

Loading

Copy link


Copy Markdown

More templates
@tanstack/angular-virtual
npm i https://pkg.pr.new/@tanstack/angular-virtual@1002

@tanstack/lit-virtual
npm i https://pkg.pr.new/@tanstack/lit-virtual@1002

@tanstack/react-virtual
npm i https://pkg.pr.new/@tanstack/react-virtual@1002

@tanstack/solid-virtual
npm i https://pkg.pr.new/@tanstack/solid-virtual@1002

@tanstack/svelte-virtual
npm i https://pkg.pr.new/@tanstack/svelte-virtual@1002

@tanstack/virtual-core
npm i https://pkg.pr.new/@tanstack/virtual-core@1002

@tanstack/vue-virtual
npm i https://pkg.pr.new/@tanstack/vue-virtual@1002

commit: c7ef283
@piecyk
piecyk
commented
May 16, 2025

Copy link


Copy Markdown

Collaborator
@balzdur Yeah, I think this makes sense as the default behavior. Adjusting the scroll position only during backward scrolling seems more intuitive and prevents unexpected jumps when resizing items. Regarding the breaking change, good question! It technically changes the default behavior, but I believe it's more of a bug fix than a breaking change since the current behavior is often not what users expect.
@balzdur
balzdur
commented
Jun 9, 2025

Copy link


Copy Markdown

ContributorAuthor
Is it ok to merge this or do I need to make some stuff ? 🙂
@piecyk
piecyk
merged commit b3b7e7d
into
TanStack:mainJun 9, 2025
@github-actionsgithub-actionsBot
mentioned this pull request
Jun 9, 2025
 Merged

@piecyk
piecyk
commented
Jun 9, 2025

Copy link


Copy Markdown

Collaborator
@balzdur looks like with this change we broke bidirectional lists, for example, in chat apps where scrolling upward loads older messages. Even without actively scrolling, we should stay in the same place after new elements are loaded. See this related discussion: #1013 (reply in thread)
@diogowbrito
diogowbrito
commented
Jun 18, 2025

Copy link


Copy Markdown

@piecyk heads up that after updating Tanstack Virtual minor version (which includes this change), we noticed a different scrolling behavior in our application. We have a scenario in which we scroll to the bottom of the table and that stopped working properly (the list was no longer scrolling all the way to the bottom, leaving a few rows left to display. Our list loads data asynchronously (I'd say similarly to the bidirectional lists you mentioned in last comment).
This should have likely been included as a minor version update, instead of a bug fix, due to the behavior change.
Thanks for all the work!
@piecyk
piecyk
commented
Jun 23, 2025

Copy link


Copy Markdown

Collaborator
@diogowbrito Hey, sorry for the hassle this caused, I appreciate you pointing it out. You're right, this change introduced a behavioral shift that probably should’ve gone out as a minor version instead. I’ll go ahead and revert it to avoid breaking existing use cases.
piecyk added a commit
to piecyk/virtual
that referenced
this pull request
Jun 23, 2025
@piecyk
Revert "Adapt default logic to adjust scroll position only on backwar…
ae7f1c0
…d scrolling (TanStack#1002)"
This reverts commit b3b7e7d.
piecyk added a commit
that referenced
this pull request
Jun 23, 2025
@piecyk
Revert "Adapt default logic to adjust scroll position only on backwar…
73fa867
…d scrolling (#1002)" (#1026)
@github-actionsgithub-actionsBot
mentioned this pull request
Jun 23, 2025
 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jun 11, 2026
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@balzdur@piecyk@diogowbrito

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Adapt default logic to adjust scroll position only on backward scrolling - #1002
Merged
piecyk merged 5 commits into
TanStack:mainfrom 
balzdur:main
Jun 9, 2025
Merged
Adapt default logic to adjust scroll position only on backward scrolling#1002
piecyk merged 5 commits into
TanStack:mainfrom 
balzdur:main
Conversation
@balzdur
@balzdurbalzdur
commented
May 14, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
This change is based on those issues: #910, #562

It tries to implement the idea from this message:
@kmpeeduwee it's default behaviour, can be disabled using shouldAdjustScrollPositionOnItemSizeChange, please checkout docs https://tanstack.com/virtual/latest/docs/api/virtualizer#shouldadjustscrollpositiononitemsizechange
Overall we should change the logic to adjust position only on scrolling backward.
Originally posted by @piecyk in #910
Disclaimer: I'm not an expert of the lib, neither someone used to contribute a lot to open source (and/or on tanstack repositories). In particular, I do not know if this should be considered breaking (since the default behaviour will change) or not.
@changeset-bot
changeset-botBot
commented
May 14, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: c7ef283
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 7 packages
NameType
@tanstack/virtual-corePatch
@tanstack/angular-virtualPatch
@tanstack/lit-virtualPatch
@tanstack/react-virtualPatch
@tanstack/solid-virtualPatch
@tanstack/svelte-virtualPatch
@tanstack/vue-virtualPatch
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
@nx-cloud
nx-cloudBot
commented
May 16, 2025•

edited

Loading

Copy link


Copy Markdown

View your CI Pipeline Execution ↗ for commit c7ef283.
CommandStatusDurationResult
nx affected --targets=test:sherif,test:knip,tes...✅ Succeeded2m 25sView ↗
nx run-many --target=build --exclude=examples/**✅ Succeeded17sView ↗
☁️ Nx Cloud last updated this comment at 2025-06-09 12:31:09 UTC
@piecykpiecyk
changed the title
Adapt default logic to adjust scroll position item size changeAdapt default logic to adjust scroll position only on backward scrollingMay 16, 2025
@pkg-pr-new
pkg-pr-newBot
commented
May 16, 2025•

edited

Loading

Copy link


Copy Markdown

More templates
@tanstack/angular-virtual
npm i https://pkg.pr.new/@tanstack/angular-virtual@1002

@tanstack/lit-virtual
npm i https://pkg.pr.new/@tanstack/lit-virtual@1002

@tanstack/react-virtual
npm i https://pkg.pr.new/@tanstack/react-virtual@1002

@tanstack/solid-virtual
npm i https://pkg.pr.new/@tanstack/solid-virtual@1002

@tanstack/svelte-virtual
npm i https://pkg.pr.new/@tanstack/svelte-virtual@1002

@tanstack/virtual-core
npm i https://pkg.pr.new/@tanstack/virtual-core@1002

@tanstack/vue-virtual
npm i https://pkg.pr.new/@tanstack/vue-virtual@1002

commit: c7ef283
@piecyk
piecyk
commented
May 16, 2025

Copy link


Copy Markdown

Collaborator
@balzdur Yeah, I think this makes sense as the default behavior. Adjusting the scroll position only during backward scrolling seems more intuitive and prevents unexpected jumps when resizing items. Regarding the breaking change, good question! It technically changes the default behavior, but I believe it's more of a bug fix than a breaking change since the current behavior is often not what users expect.
@balzdur
balzdur
commented
Jun 9, 2025

Copy link


Copy Markdown

ContributorAuthor
Is it ok to merge this or do I need to make some stuff ? 🙂
@piecyk
piecyk
merged commit b3b7e7d
into
TanStack:mainJun 9, 2025
@github-actionsgithub-actionsBot
mentioned this pull request
Jun 9, 2025
 Merged

@piecyk
piecyk
commented
Jun 9, 2025

Copy link


Copy Markdown

Collaborator
@balzdur looks like with this change we broke bidirectional lists, for example, in chat apps where scrolling upward loads older messages. Even without actively scrolling, we should stay in the same place after new elements are loaded. See this related discussion: #1013 (reply in thread)
@diogowbrito
diogowbrito
commented
Jun 18, 2025

Copy link


Copy Markdown

@piecyk heads up that after updating Tanstack Virtual minor version (which includes this change), we noticed a different scrolling behavior in our application. We have a scenario in which we scroll to the bottom of the table and that stopped working properly (the list was no longer scrolling all the way to the bottom, leaving a few rows left to display. Our list loads data asynchronously (I'd say similarly to the bidirectional lists you mentioned in last comment).
This should have likely been included as a minor version update, instead of a bug fix, due to the behavior change.
Thanks for all the work!
@piecyk
piecyk
commented
Jun 23, 2025

Copy link


Copy Markdown

Collaborator
@diogowbrito Hey, sorry for the hassle this caused, I appreciate you pointing it out. You're right, this change introduced a behavioral shift that probably should’ve gone out as a minor version instead. I’ll go ahead and revert it to avoid breaking existing use cases.
piecyk added a commit
to piecyk/virtual
that referenced
this pull request
Jun 23, 2025
@piecyk
Revert "Adapt default logic to adjust scroll position only on backwar…
ae7f1c0
…d scrolling (TanStack#1002)"
This reverts commit b3b7e7d.
piecyk added a commit
that referenced
this pull request
Jun 23, 2025
@piecyk
Revert "Adapt default logic to adjust scroll position only on backwar…
73fa867
…d scrolling (#1002)" (#1026)
@github-actionsgithub-actionsBot
mentioned this pull request
Jun 23, 2025
 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jun 11, 2026
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@balzdur@piecyk@diogowbrito

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Adapt default logic to adjust scroll position only on backward scrolling - #1002
Merged
piecyk merged 5 commits into
TanStack:mainfrom 
balzdur:main
Jun 9, 2025
Merged
Adapt default logic to adjust scroll position only on backward scrolling#1002
piecyk merged 5 commits into
TanStack:mainfrom 
balzdur:main
Conversation
@balzdur
@balzdurbalzdur
commented
May 14, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
This change is based on those issues: #910, #562

It tries to implement the idea from this message:
@kmpeeduwee it's default behaviour, can be disabled using shouldAdjustScrollPositionOnItemSizeChange, please checkout docs https://tanstack.com/virtual/latest/docs/api/virtualizer#shouldadjustscrollpositiononitemsizechange
Overall we should change the logic to adjust position only on scrolling backward.
Originally posted by @piecyk in #910
Disclaimer: I'm not an expert of the lib, neither someone used to contribute a lot to open source (and/or on tanstack repositories). In particular, I do not know if this should be considered breaking (since the default behaviour will change) or not.
@changeset-bot
changeset-botBot
commented
May 14, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: c7ef283
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 7 packages
NameType
@tanstack/virtual-corePatch
@tanstack/angular-virtualPatch
@tanstack/lit-virtualPatch
@tanstack/react-virtualPatch
@tanstack/solid-virtualPatch
@tanstack/svelte-virtualPatch
@tanstack/vue-virtualPatch
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
@nx-cloud
nx-cloudBot
commented
May 16, 2025•

edited

Loading

Copy link


Copy Markdown

View your CI Pipeline Execution ↗ for commit c7ef283.
CommandStatusDurationResult
nx affected --targets=test:sherif,test:knip,tes...✅ Succeeded2m 25sView ↗
nx run-many --target=build --exclude=examples/**✅ Succeeded17sView ↗
☁️ Nx Cloud last updated this comment at 2025-06-09 12:31:09 UTC
@piecykpiecyk
changed the title
Adapt default logic to adjust scroll position item size changeAdapt default logic to adjust scroll position only on backward scrollingMay 16, 2025
@pkg-pr-new
pkg-pr-newBot
commented
May 16, 2025•

edited

Loading

Copy link


Copy Markdown

More templates
@tanstack/angular-virtual
npm i https://pkg.pr.new/@tanstack/angular-virtual@1002

@tanstack/lit-virtual
npm i https://pkg.pr.new/@tanstack/lit-virtual@1002

@tanstack/react-virtual
npm i https://pkg.pr.new/@tanstack/react-virtual@1002

@tanstack/solid-virtual
npm i https://pkg.pr.new/@tanstack/solid-virtual@1002

@tanstack/svelte-virtual
npm i https://pkg.pr.new/@tanstack/svelte-virtual@1002

@tanstack/virtual-core
npm i https://pkg.pr.new/@tanstack/virtual-core@1002

@tanstack/vue-virtual
npm i https://pkg.pr.new/@tanstack/vue-virtual@1002

commit: c7ef283
@piecyk
piecyk
commented
May 16, 2025

Copy link


Copy Markdown

Collaborator
@balzdur Yeah, I think this makes sense as the default behavior. Adjusting the scroll position only during backward scrolling seems more intuitive and prevents unexpected jumps when resizing items. Regarding the breaking change, good question! It technically changes the default behavior, but I believe it's more of a bug fix than a breaking change since the current behavior is often not what users expect.
@balzdur
balzdur
commented
Jun 9, 2025

Copy link


Copy Markdown

ContributorAuthor
Is it ok to merge this or do I need to make some stuff ? 🙂
@piecyk
piecyk
merged commit b3b7e7d
into
TanStack:mainJun 9, 2025
@github-actionsgithub-actionsBot
mentioned this pull request
Jun 9, 2025
 Merged

@piecyk
piecyk
commented
Jun 9, 2025

Copy link


Copy Markdown

Collaborator
@balzdur looks like with this change we broke bidirectional lists, for example, in chat apps where scrolling upward loads older messages. Even without actively scrolling, we should stay in the same place after new elements are loaded. See this related discussion: #1013 (reply in thread)
@diogowbrito
diogowbrito
commented
Jun 18, 2025

Copy link


Copy Markdown

@piecyk heads up that after updating Tanstack Virtual minor version (which includes this change), we noticed a different scrolling behavior in our application. We have a scenario in which we scroll to the bottom of the table and that stopped working properly (the list was no longer scrolling all the way to the bottom, leaving a few rows left to display. Our list loads data asynchronously (I'd say similarly to the bidirectional lists you mentioned in last comment).
This should have likely been included as a minor version update, instead of a bug fix, due to the behavior change.
Thanks for all the work!
@piecyk
piecyk
commented
Jun 23, 2025

Copy link


Copy Markdown

Collaborator
@diogowbrito Hey, sorry for the hassle this caused, I appreciate you pointing it out. You're right, this change introduced a behavioral shift that probably should’ve gone out as a minor version instead. I’ll go ahead and revert it to avoid breaking existing use cases.
piecyk added a commit
to piecyk/virtual
that referenced
this pull request
Jun 23, 2025
@piecyk
Revert "Adapt default logic to adjust scroll position only on backwar…
ae7f1c0
…d scrolling (TanStack#1002)"
This reverts commit b3b7e7d.
piecyk added a commit
that referenced
this pull request
Jun 23, 2025
@piecyk
Revert "Adapt default logic to adjust scroll position only on backwar…
73fa867
…d scrolling (#1002)" (#1026)
@github-actionsgithub-actionsBot
mentioned this pull request
Jun 23, 2025
 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jun 11, 2026
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@balzdur@piecyk@diogowbrito

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Adapt default logic to adjust scroll position only on backward scrolling - #1002
Merged
piecyk merged 5 commits into
TanStack:mainfrom 
balzdur:main
Jun 9, 2025
Merged
Adapt default logic to adjust scroll position only on backward scrolling#1002
piecyk merged 5 commits into
TanStack:mainfrom 
balzdur:main
Conversation
@balzdur
@balzdurbalzdur
commented
May 14, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
This change is based on those issues: #910, #562

It tries to implement the idea from this message:
@kmpeeduwee it's default behaviour, can be disabled using shouldAdjustScrollPositionOnItemSizeChange, please checkout docs https://tanstack.com/virtual/latest/docs/api/virtualizer#shouldadjustscrollpositiononitemsizechange
Overall we should change the logic to adjust position only on scrolling backward.
Originally posted by @piecyk in #910
Disclaimer: I'm not an expert of the lib, neither someone used to contribute a lot to open source (and/or on tanstack repositories). In particular, I do not know if this should be considered breaking (since the default behaviour will change) or not.
@changeset-bot
changeset-botBot
commented
May 14, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: c7ef283
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 7 packages
NameType
@tanstack/virtual-corePatch
@tanstack/angular-virtualPatch
@tanstack/lit-virtualPatch
@tanstack/react-virtualPatch
@tanstack/solid-virtualPatch
@tanstack/svelte-virtualPatch
@tanstack/vue-virtualPatch
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
@nx-cloud
nx-cloudBot
commented
May 16, 2025•

edited

Loading

Copy link


Copy Markdown

View your CI Pipeline Execution ↗ for commit c7ef283.
CommandStatusDurationResult
nx affected --targets=test:sherif,test:knip,tes...✅ Succeeded2m 25sView ↗
nx run-many --target=build --exclude=examples/**✅ Succeeded17sView ↗
☁️ Nx Cloud last updated this comment at 2025-06-09 12:31:09 UTC
@piecykpiecyk
changed the title
Adapt default logic to adjust scroll position item size changeAdapt default logic to adjust scroll position only on backward scrollingMay 16, 2025
@pkg-pr-new
pkg-pr-newBot
commented
May 16, 2025•

edited

Loading

Copy link


Copy Markdown

More templates
@tanstack/angular-virtual
npm i https://pkg.pr.new/@tanstack/angular-virtual@1002

@tanstack/lit-virtual
npm i https://pkg.pr.new/@tanstack/lit-virtual@1002

@tanstack/react-virtual
npm i https://pkg.pr.new/@tanstack/react-virtual@1002

@tanstack/solid-virtual
npm i https://pkg.pr.new/@tanstack/solid-virtual@1002

@tanstack/svelte-virtual
npm i https://pkg.pr.new/@tanstack/svelte-virtual@1002

@tanstack/virtual-core
npm i https://pkg.pr.new/@tanstack/virtual-core@1002

@tanstack/vue-virtual
npm i https://pkg.pr.new/@tanstack/vue-virtual@1002

commit: c7ef283
@piecyk
piecyk
commented
May 16, 2025

Copy link


Copy Markdown

Collaborator
@balzdur Yeah, I think this makes sense as the default behavior. Adjusting the scroll position only during backward scrolling seems more intuitive and prevents unexpected jumps when resizing items. Regarding the breaking change, good question! It technically changes the default behavior, but I believe it's more of a bug fix than a breaking change since the current behavior is often not what users expect.
@balzdur
balzdur
commented
Jun 9, 2025

Copy link


Copy Markdown

ContributorAuthor
Is it ok to merge this or do I need to make some stuff ? 🙂
@piecyk
piecyk
merged commit b3b7e7d
into
TanStack:mainJun 9, 2025
@github-actionsgithub-actionsBot
mentioned this pull request
Jun 9, 2025
 Merged

@piecyk
piecyk
commented
Jun 9, 2025

Copy link


Copy Markdown

Collaborator
@balzdur looks like with this change we broke bidirectional lists, for example, in chat apps where scrolling upward loads older messages. Even without actively scrolling, we should stay in the same place after new elements are loaded. See this related discussion: #1013 (reply in thread)
@diogowbrito
diogowbrito
commented
Jun 18, 2025

Copy link


Copy Markdown

@piecyk heads up that after updating Tanstack Virtual minor version (which includes this change), we noticed a different scrolling behavior in our application. We have a scenario in which we scroll to the bottom of the table and that stopped working properly (the list was no longer scrolling all the way to the bottom, leaving a few rows left to display. Our list loads data asynchronously (I'd say similarly to the bidirectional lists you mentioned in last comment).
This should have likely been included as a minor version update, instead of a bug fix, due to the behavior change.
Thanks for all the work!
@piecyk
piecyk
commented
Jun 23, 2025

Copy link


Copy Markdown

Collaborator
@diogowbrito Hey, sorry for the hassle this caused, I appreciate you pointing it out. You're right, this change introduced a behavioral shift that probably should’ve gone out as a minor version instead. I’ll go ahead and revert it to avoid breaking existing use cases.
piecyk added a commit
to piecyk/virtual
that referenced
this pull request
Jun 23, 2025
@piecyk
Revert "Adapt default logic to adjust scroll position only on backwar…
ae7f1c0
…d scrolling (TanStack#1002)"
This reverts commit b3b7e7d.
piecyk added a commit
that referenced
this pull request
Jun 23, 2025
@piecyk
Revert "Adapt default logic to adjust scroll position only on backwar…
73fa867
…d scrolling (#1002)" (#1026)
@github-actionsgithub-actionsBot
mentioned this pull request
Jun 23, 2025
 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jun 11, 2026
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@balzdur@piecyk@diogowbrito