Merge d6388add7f into 05a3bce6bb

.changeset/true-baths-juggle.md

@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: add scrollWidth/scrollHeight to the list of bindable properties

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)

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 `<iframe>` hack
+- elements with `clientWidth`/`clientHeight`/`offsetWidth`/`offsetHeight`/`scrollWidth`/`scrollHeight` bindings use a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) rather than a convoluted `<iframe>` hack
 - `<input type="range" bind:value={...} />` only uses an `input` event listener, rather than also listening for `change` events as a fallback
 
 The `legacy` compiler option, which generated bulkier but IE-friendly code, no longer exists.

packages/svelte/elements.d.ts

@@ -850,6 +850,8 @@ export interface HTMLAttributes<T extends EventTarget> 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;

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;
 

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']

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) {

packages/svelte/tests/server-side-rendering/samples/bindings-readonly/main.svelte

@@ -3,16 +3,18 @@
 	export let clientHeight = 2;
 	export let offsetHeight = 3;
 	export let offsetWidth = 4;
+	export let scrollHeight = 5;
+	export let scrollWidth = 6;
 
-	export let audioDuration = 5;
-	export let audioBuffered = 6;
-	export let audioSeekable = 7;
-	export let audioPlayed = 8;
+	export let audioDuration = 7;
+	export let audioBuffered = 8;
+	export let audioSeekable = 9;
+	export let audioPlayed = 10;
 
-	export let videoDuration = 9;
-	export let videoBuffered = 10;
-	export let videoSeekable = 11;
-	export let videoPlayed = 12;
+	export let videoDuration = 11;
+	export let videoBuffered = 12;
+	export let videoSeekable = 13;
+	export let videoPlayed = 14;
 
 	export let value = '/some/file';
 </script>
@@ -22,6 +24,8 @@
 	bind:clientHeight
 	bind:offsetWidth
 	bind:offsetHeight
+	bind:scrollWidth
+	bind:scrollHeight
 ></div>
 
 <audio