getBoundingClientRect().width is not the same as scrollWidth

[Dmaziyo]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth

What specific section or headline is this issue about?

Note

What information was incorrect, unhelpful, or incomplete?

The note says we can get a fractional value for scrollWidth using getBoundingClientRect, but I didn't see this property in getBoundingClientRect.

What did you expect to see?

Either delete the note or provide the correct method to get a fractional value.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/api/element/scrollwidth
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/element/scrollwidth/index.md
• Last commit: d0b23f3
• Document last modified: 2024-07-26T02:56:49.000Z

[Josh-Cena]

Isn't it just .width? Or are you concerned about border widths? Or do you just want us to explicitly mention .width?

[Dmaziyo]

Isn't it just .width? Or are you concerned about border widths? Or do you just want us to explicitly mention .width?

Sorry for not being clear before,here's more specific situation, how can i get the fractional value of scrollWidth?
https://codesandbox.io/p/sandbox/fractional-value-of-scrollwidth-nqp5kg
the docs says we can get it from getBoundingClientRect

[Josh-Cena]

Doesn't it already do?

[Josh-Cena]

You may have misread the note? It says scrollWidth returns an integer, and if you want a fractional value that also represents the width of the same element, you can use getBoundingClientRect. It's not saying getBoundingClientRect itself has anything to do scrollWidth in particular.

[Dmaziyo]

Doesn't it already do?

I don’t know why my result is different from yours, here's the result in my broswer

i want to say getBoundingClientRect.width don't include the content not visible on the screen due to overflow. scrollWidth is equal to reactWidth only when the element's content can fit without a need for horizontal scrollbar

[Dmaziyo]

You may have misread the note? It says scrollWidth returns an integer, and if you want a fractional value that also represents the width of the same element, you can use getBoundingClientRect. It's not saying getBoundingClientRect itself has anything to do scrollWidth in particular.

But I can't get a fractional value that accurately represents the width of the same element, including the invisible content due to overflow

[Josh-Cena]

I see what you mean. Indeed, scrollWidth includes non-visible area while getBoundingClientRect doesn't. And I don't really know an equivalent solution that (a) accounts for overflow (b) returns a fractional value.