From dda1de1cd4462be0a2b6db61e85a3a2631580d7e Mon Sep 17 00:00:00 2001 From: Azuriru Date: Wed, 20 May 2026 02:26:22 +0800 Subject: [PATCH 1/4] feat: scrollWidth and scrollHeight in bind: --- packages/svelte/elements.d.ts | 2 ++ .../phases/3-transform/client/visitors/BindDirective.js | 2 ++ packages/svelte/src/compiler/phases/bindings.js | 8 ++++++++ .../src/internal/client/dom/elements/bindings/size.js | 2 +- 4 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts index daa40635b6..6bdd423b0d 100644 --- a/packages/svelte/elements.d.ts +++ b/packages/svelte/elements.d.ts @@ -850,6 +850,8 @@ export interface HTMLAttributes extends AriaAttributes, D readonly 'bind:focused'?: boolean | undefined | null; readonly 'bind:offsetWidth'?: number | undefined | null; readonly 'bind:offsetHeight'?: number | undefined | null; + readonly 'bind:scrollWidth'?: number | undefined | null; + readonly 'bind:scrollHeight'?: number | undefined | null; // allow any data- attribute [key: `data-${string}`]: any; diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js index 6838e5006d..106b255172 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js @@ -169,6 +169,8 @@ export function BindDirective(node, context) { case 'clientHeight': case 'offsetWidth': case 'offsetHeight': + case 'scrollWidth': + case 'scrollHeight': call = b.call('$.bind_element_size', context.state.node, b.literal(node.name), set ?? get); break; diff --git a/packages/svelte/src/compiler/phases/bindings.js b/packages/svelte/src/compiler/phases/bindings.js index 6714a6e77d..94886206a3 100644 --- a/packages/svelte/src/compiler/phases/bindings.js +++ b/packages/svelte/src/compiler/phases/bindings.js @@ -163,6 +163,14 @@ export const binding_properties = { omit_in_ssr: true, invalid_elements: ['svelte:window', 'svelte:document'] }, + scrollWidth: { + omit_in_ssr: true, + invalid_elements: ['svelte:window', 'svelte:document'] + }, + scrollHeight: { + omit_in_ssr: true, + invalid_elements: ['svelte:window', 'svelte:document'] + }, contentRect: { omit_in_ssr: true, invalid_elements: ['svelte:window', 'svelte:document'] diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/size.js b/packages/svelte/src/internal/client/dom/elements/bindings/size.js index 016ee5a547..0550abfe0d 100644 --- a/packages/svelte/src/internal/client/dom/elements/bindings/size.js +++ b/packages/svelte/src/internal/client/dom/elements/bindings/size.js @@ -93,7 +93,7 @@ export function bind_resize_observer(element, type, set) { /** * @param {HTMLElement} element - * @param {'clientWidth' | 'clientHeight' | 'offsetWidth' | 'offsetHeight'} type + * @param {'clientWidth' | 'clientHeight' | 'offsetWidth' | 'offsetHeight' | 'scrollWidth' | 'scrollHeight'} type * @param {(size: number) => void} set */ export function bind_element_size(element, type, set) { From a4ea4f56e4cbd935cd87fdc0d411cbac63e51f9d Mon Sep 17 00:00:00 2001 From: Azuriru Date: Wed, 20 May 2026 02:33:16 +0800 Subject: [PATCH 2/4] chore: update docs to include scrollWidth/scrollHeight --- documentation/docs/03-template-syntax/12-bind.md | 2 ++ documentation/docs/07-misc/07-v5-migration-guide.md | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/documentation/docs/03-template-syntax/12-bind.md b/documentation/docs/03-template-syntax/12-bind.md index b93f207e71..24113c1e40 100644 --- a/documentation/docs/03-template-syntax/12-bind.md +++ b/documentation/docs/03-template-syntax/12-bind.md @@ -325,6 +325,8 @@ All visible elements have the following readonly bindings, measured with a `Resi - [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) - [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth) - [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight) +- [`scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth) +- [`scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) - [`contentRect`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect) - [`contentBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize) - [`borderBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/borderBoxSize) diff --git a/documentation/docs/07-misc/07-v5-migration-guide.md b/documentation/docs/07-misc/07-v5-migration-guide.md index 9b1f2dec63..78fd2ee7cd 100644 --- a/documentation/docs/07-misc/07-v5-migration-guide.md +++ b/documentation/docs/07-misc/07-v5-migration-guide.md @@ -709,7 +709,7 @@ As before, you can disable whitespace trimming by setting the `preserveWhitespac Svelte 5 requires a modern browser (in other words, not Internet Explorer) for various reasons: - it uses [`Proxies`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) -- elements with `clientWidth`/`clientHeight`/`offsetWidth`/`offsetHeight` bindings use a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) rather than a convoluted `