为什么scrollWidth只包括左填充？ [英] Why does scrollWidth only include the left padding?

问题描述

所以，我有一个DIV #wrapper指定里面有一个固定的宽度。里面的那个DIV，我有另外一个DIV #Panel 其中也有一个固定的宽度：

 ＆LT; D​​IV ID =包装＆GT;
    ＆LT; P＆GT; ...＆LT; / P＆GT;
    ＆LT; D​​IV ID =面板＆GT;板＆LT; / DIV＆GT;
    ＆LT; P＆GT; ...＆LT; / P＆GT;
＆LT; / DIV＆GT;
 

有时候，面板的宽度比与包装物的大，在这种情况下，我想扩大通过JavaScript的包装，使包装它的面板非常完美。

现场演示： http://jsfiddle.net/H6rML/

我打算用 .scrollWidth 的包装，以确定面板的宽度。然而，问题是，包装有水平填充，并且 .scrollWidth 出于某种原因仅包括包装的左填充。所以：

  Wrapper.scrollWidth === Wrapper.LeftPadding + Panel.Width
 

因此​​，考虑到：

  #wrapper指定{
    宽度：200像素;
    填充：10px的;
}#Panel {
    宽度：300像素;
}
 

Wrapper.scrollWidth 收益 310px ，这是不是非常有用的。如果 .scrollWidth 不包括任何填充，只返回面板的宽度，我可以与工作（我将手动添加填充到该值）。如果两个垫都包括在内，我可以与工作了。但是，为什么只包含左填充？ （顺便说一下这种行为似乎是跨浏览器。）

一个另外几个注意事项：

1. 我不能直接设置宽度的包装。在我的实际code，我设置的是包装几个级别以上的祖先元素的宽度，我用一个自定义的API来设置宽度。这就是为什么我需要检索完整的 320像素值。




2. 我想这并不取决于包装内容的解决方案。在我的演示它是一个小组，但在其他情况下有可能是溢出，甚至是多个元素的不同元素。这就是为什么我用 .scrollWidth 继续包装。

有没有一种方法来获取值 320像素无需向右填充手动添加到 .scrollWidth 价值？

---

顺便说一下，根据标准，正确填充应该包括：

  

该scrollWidth属性必须返回运行这些结果
  步骤：

  
  

  

1. 如果元素没有任何关联的CSS布局框返回零，并终止这些步骤。


  

2. 如果该元素是根元素和文档是不是在怪癖模式最大的回报（文档内容的宽度，innerWidth值）。


  

3. 如果该元素是HTML body元素和文档处于怪癖模式最大的回报（文档内容的宽度，innerWidth值）。


  

4. 返回'填充左'属性的计算值，加上的填充右'的计算值，再加上元素的内容的宽度。


  

来源： http://www.w3.org/TR/cssom-view/

为什么不浏览器的行为相应？

---

要进一步提高我的帖子的清晰度，让我总结两个主要问题：

（1）如果标准规定，右填充应列入 .scrollWidth 价值，那么我们为什么不浏览器相应的行为？

（2）是否有可能获取正确的值（ 320像素在我的情况），而无需手动添加正确的填充？

---

这个问题已经在另一个线程回答

在这个问题的答案位于：<一href=\"http://stackoverflow.com/questions/10054870/when-a-child-element-overflows-horizontally-why-is-the-right-padding-of-the-par\">When子元素水平溢出，为什么忽略了父母的右填充？

解决方案

我不知道如果我理解正确，但是从我读，我假设你想改变的基础上#Panel #wrapper指定的宽度。在这种情况下，也许你可以尝试以下方法：

  #wrapper指定{
    显示：inline-block的;
    确保从#wrapper指定宽度删除
}
 

So, I have a DIV #Wrapper which has a fixed width. Inside that DIV, I have another DIV #Panel which also has a fixed width:

<div id="Wrapper">
    <p>...</p>
    <div id="Panel">Panel</div>
    <p>...</p>
</div>  

Sometimes, the width of the Panel is larger than the with of the Wrapper, and in those cases I would like to widen the Wrapper via JavaScript, so that it wraps the Panel perfectly.

Live demo: http://jsfiddle.net/H6rML/

I intended to use .scrollWidth on the Wrapper to determine the width of the Panel. However, the problem is that the Wrapper has horizontal padding, and the .scrollWidth for some reason only includes the left-padding of the wrapper. So:

Wrapper.scrollWidth === Wrapper.LeftPadding + Panel.Width

So, given:

#Wrapper {
    width: 200px;
    padding: 10px;        
}

#Panel {
    width: 300px;
}

Wrapper.scrollWidth returns 310px, which is not very useful. If .scrollWidth didn't include any padding and only returned the width of the Panel, I could work with that (I would add the padding manually to that value). If both paddings were included, I could work with that too. But why is only the left padding included? (Btw this behavior appears to be cross-browser.)

A few additional notes:

1. I cannot set the width on the Wrapper directly. In my actual code, I set the width on an ancestor element that is several levels above the Wrapper, and I use a custom API to set the width. This is why I need to retrieve the full 320px value.

2. I would like a solution that does not depend on the content of the Wrapper. In my demo it's a Panel, but in other scenarios there could be a different element that overflows, or even multiple elements. That is why I went with .scrollWidth on the Wrapper.

Is there a way to get the value 320px without having to manually add the right padding to the .scrollWidth value?

---

Btw, according to the standard, the right padding should be included:

The scrollWidth attribute must return the result of running these steps:

1. If the element does not have any associated CSS layout box return zero and terminate these steps.

2. If the element is the root element and the Document is not in quirks mode return max(document content width, value of innerWidth).

3. If the element is the HTML body element and the Document is in quirks mode return max(document content width, value of innerWidth).

4. Return the computed value of the 'padding-left' property, plus the computed value of the 'padding-right', plus the content width of the element.

Source: http://www.w3.org/TR/cssom-view/

Why don't the browsers behave accordingly?

---

To further improve the clarity of my post, let me sum up the two main questions:

(1) If the standard states that the right padding should be included in the .scrollWidth value, then why don't the browsers behave accordingly?

(2) Is it possible to retrieve the correct value (320px in my case), without having to manually add the right padding?

---

This question has been answered in another thread

The answer to this question is located here: When a child element overflows horizontally, why is the right padding of the parent ignored?

​

解决方案

I'm not sure if I understand correctly, but from what I read, I assume you want to change width of #Wrapper based on #Panel. In that case, maybe you could try the following:

#Wrapper {
    display: inline-block;
    make sure to remove width from #Wrapper
}

这篇关于为什么scrollWidth只包括左填充？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！