W3C home > Mailing lists > Public > www-style@w3.org > August 2010

Re: [cssom-view] scrollWidth vs clientWidth

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Fri, 20 Aug 2010 08:41:08 -0700
Message-ID: <AANLkTikFAz+y4SxwKra5aAOb3G-9kQGC8aWfNmktzdLJ@mail.gmail.com>
To: Sylvain Galineau <sylvaing@microsoft.com>
Cc: David Flanagan <david@davidflanagan.com>, Anne van Kesteren <annevk@opera.com>, "www-style@w3.org" <www-style@w3.org>
On Fri, Aug 20, 2010 at 8:08 AM, Sylvain Galineau
<sylvaing@microsoft.com> wrote:
> Why does scrollWidth overflow over and beyond the border area ?
> I assume this is a bug in the diagram layout ?

No, that's intended.  If the content overflows the content area,
scrollWidth uses the width of the content.  Note the border-top of the
scrollWidth bar; it's bright red for the content width, and paler red
for the padding width.

I just realized that this may not be super-obvious, because the width
of the content will vary based on your default font.  I've fixed the
diagram to take care of that; it'll now always be correct no matter
what font you use:

<!DOCTYPE html>
<div id=border style="position: relative; width: 500px; height: 400px;
border: 3px solid black; font-weight: bold; font-family: sans-serif;
background: #ccc;">
	<div id=padding style="width: 400px; height: 300px; border: 3px
dashed gray; margin: 47px; background: white;">
		<div id=content style="position: relative; width:300px;
height:200px; border: 3px dotted silver; margin: 47px;">
			<pre style="position: relative; z-index: 50;">foo foo foo foo foo
foo foo foo foo foo foo foo</pre>
		</div>
	</div>
	<div>
	</div>
	<div id=scrollbar-v style="position: absolute; top: 50px; right:
50px; height:278px; width: 18px; border: 1px solid #aaa; background:
silver; margin: 0 0 0 auto;">
		<div id=scrollbar-v-up-arrow style="height:0; width: 0;border-style:
solid; border-width: 0 6px 10px 6px; border-color: transparent
transparent #aaa transparent; position: absolute; top: 3px; left:
3px;"></div>
		<div id=scrollbar-v-down-arrow style="height:0; width:
0;border-style: solid; border-width: 10px 6px 0 6px; border-color:
#aaa transparent transparent transparent; position: absolute; bottom:
3px; left: 3px;"></div>
	</div>

	<div id=scrollbar-h style="position: absolute; bottom: 50px; left:
50px; height:18px; width: 378px; border: 1px solid #aaa; background:
silver; margin: 0 0 0 auto;">
		<div id=scrollbar-h-left-arrow style="height:0; width:
0;border-style: solid; border-width: 6px 10px 6px 0; border-color:
transparent #aaa transparent transparent; position: absolute; top:
3px; left: 3px;"></div>
		<div id=scrollbar-h-right-arrow style="height:0; width:
0;border-style: solid; border-width: 6px 0 6px 10px; border-color:
transparent transparent transparent #aaa; position: absolute; bottom:
3px; right: 3px;"></div>
		<div style="height: 18px; width: 18px; background: silver; border:
1px solid #aaa; position: absolute; bottom: -1px; right:
-21px;"></div>
	</div>

	<div id=scrollwidth-bar style="position:absolute; top: 150px; left: 50px;">
		<pre id=scrollwidth-bordertop style="height: 3px; color: red;
background: red; border-left: 50px solid #f88; border-right: 50px
solid #f88; overflow: hidden; margin: 0;">foo foo foo foo foo foo foo
foo foo foo foo foo</pre>
		<div id=scrollwidth-text style="color: red; text-align: center;
background: #fbb; border-radius: 0 0 8px 8px; padding-top:
2px;">scrollWidth = padding-left + content width + padding-right</div>
	</div>

	<div id=clientwidth-content style="position: absolute; width: 380px;
height: 3px; background: blue; top: 200px; left: 50px;"></div>
	<div id=clientwidth-text style="position: absolute; color: blue;
width: 380px; top: 203px; left: 50px; text-align: center; background:
#bbf; border-radius: 0 0 8px 8px; padding-top: 2px;">clientWidth =
padding area width - scrollbar width</div>

	<div id=border-label style="position: absolute; bottom: 0; left:
120px; color: black;">border area</div>
	<div id=padding-label style="position: absolute; bottom: 72px; left:
120px; color: gray;">padding area</div>
	<div id=content-label style="position: absolute; bottom: 100px; left:
120px; color: silver;">content area</div>
</div>

~TJ


>> -----Original Message-----
>> From: www-style-request@w3.org [mailto:www-style-request@w3.org] On
>> Behalf Of Tab Atkins Jr.
>> Sent: Wednesday, August 18, 2010 8:15 PM
>> To: David Flanagan
>> Cc: Anne van Kesteren; www-style@w3.org
>> Subject: Re: [cssom-view] scrollWidth vs clientWidth
>>
>> On Wed, Aug 18, 2010 at 11:32 AM, David Flanagan
>> <david@davidflanagan.com> wrote:
>> > Tab Atkins Jr. wrote:
>> >>
>> >> Changes made: http://www.xanthir.com/diagrams/scrollwidth-
>> clientwidth.html
>> >>
>> >
>> > The diagram makes it clear what happens when an element's content is
>> wider
>> > than the content area. What about the opposite, though: what if the
>> content
>> > is smaller than the content area.  Is scrollWidth the same as
>> clientWidth in
>> > that case, or is it smaller?
>>
>> Same.  If the content doesn't overflow the content area, then the
>> content area is whatever is given by the appropriate CSS rules.
>>
>> data:text/html,<!doctype html><div style="width: 400px; padding: 50px;
>> border: 2px; overflow:scroll;" id=foo>foo foo</div><script>var el =
>> document.getElementById('foo'); alert(el.clientWidth + "\n" +
>> el.scrollWidth);</script>
>>
>> ~TJ
>>
>
>
Received on Friday, 20 August 2010 15:42:01 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:30 GMT