为什么scrollWidth只包含左边距?

时间:2012-04-06 13:59:35

标签: javascript html css browser cssom

所以,我有一个固定宽度的DIV #Wrapper。在那个DIV中,我有另一个DIV #Panel,它也有一个固定的宽度:

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

有时,Panel的宽度大于Wrapper的宽度,在这种情况下,我想通过JavaScript扩展Wrapper,以便它完美地包裹Panel。

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

我打算在Wrapper上使用.scrollWidth来确定Panel的宽度。但是,问题是Wrapper有水平填充,.scrollWidth由于某种原因只包括包装的左边填充。所以:

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

所以,给定:

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

#Panel {
    width: 300px;
}

Wrapper.scrollWidth返回310px,这不是很有用。如果.scrollWidth没有包含任何填充并仅返回Panel的宽度,我可以使用它(我会手动将填充添加到该值)。如果两个填充都包含在内,我也可以使用它。但为什么只包括左边填充? (顺便说一句,这种行为似乎是跨浏览器。)

一些补充说明:

  1. 我无法直接在Wrapper上设置宽度。在我的实际代码中,我在一个祖先元素上设置宽度,该元素比Wrapper高几级,我使用自定义API来设置宽度。这就是我需要检索完整320px值的原因。

  2. 我想要一个不依赖于Wrapper内容的解决方案。在我的演示中,它是一个Panel,但在其他情况下,可能会有一个不同的元素溢出,甚至是多个元素。这就是我在Wrapper上使用.scrollWidth的原因。

  3. 有没有办法获得值320px,而无需手动将正确的填充添加到.scrollWidth值?


    顺便说一下,根据标准,应该包括正确的填充:

      

    scrollWidth属性必须返回运行这些的结果   步骤进行:

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

    2.   
    3. 如果元素是根元素且Document未处于怪癖模式,则返回max(文档内容宽度,innerWidth的值)。

    4.   
    5. 如果元素是HTML body元素且Document处于quirks模式,则返回max(文档内容宽度,innerWidth的值)。

    6.   
    7. 返回“填充左”属性的计算值,加上的“填充 - 右”的计算值,加元素的含量宽度。

    8.   

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

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


    为了进一步提高帖子的清晰度,让我总结两个主要问题:

    (1)如果标准声明右侧填充应包含在.scrollWidth值中,那么为什么浏览器不会相应地运行?

    (2)是否可以检索正确的值(在我的情况下为320px),而无需手动添加正确的填充?


    此问题已在另一个帖子

    中得到解答

    这个问题的答案位于:When a child element overflows horizontally, why is the right padding of the parent ignored?

4 个答案:

答案 0 :(得分:1)

我不确定我是否理解正确,但从我读到的内容来看,我假设您想要根据#Panel更改#Wrapper的宽度。在这种情况下,也许您可​​以尝试以下方法:

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

答案 1 :(得分:0)

试试这个:

#Wrapper {
    min-width: 200px;
    padding: 10px;
    float: left; 
}

或使用jQuery

$(document).ready(function() {
    var width = jQuery("#Panel").width();
    $("#Wrapper").width(width);
});

答案 2 :(得分:0)

您可以使用jQuery执行此操作:

$(function() {
    $("#Wrapper").width($("#Panel").outerWidth());
});

这会考虑#Panel的填充,边距等。

答案 3 :(得分:0)

我不知道为什么领先的浏览器会在今天之前共享此错误,但这是一个问题演示和inline-block解决方法

document.body.innerHTML += 'one.scrollWidth = '+ document.querySelector('.one').scrollWidth 
                          +'<br>two.scrollWidth = '+ document.querySelector('.two').scrollWidth
                          +'<br>three.scrollWidth = '+ document.querySelector('.three').scrollWidth
                          +'&nbsp;&nbsp;&nbsp;(fix applied to grand children)<br>four.scrollWidth = '+ document.querySelector('.four').scrollWidth +'&nbsp;&nbsp;&nbsp;(fix applied to direct child)';
.parent{
  border:1px solid rgba(50,150,220,1);
}
.child{
  background:rgba(100,200,255,0.3);
  padding:10px 20px;
  white-space:nowrap;
}
.scroll-container{
  border:1px solid red;
  display:inline-block;
  overflow:hidden;
}
.two, .three, .four{
  width:60px;
}
.three .child{
  display:inline-block;
}
.four .parent{
  display:inline-block;
}
<div class="scroll-container one">
  <div class="parent">
    <div class="child">Lorem ipsum dolor</div>
    <div class="child">Lorem ipsum dolor sit amet</div>
  </div>
</div>
<br>
<div class="scroll-container two">
  <div class="parent">
    <div class="child">Lorem ipsum dolor</div>
    <div class="child">Lorem ipsum dolor sit amet</div>
  </div>
</div>
<br>
<div class="scroll-container three">
  <div class="parent">
    <div class="child">Lorem ipsum dolor</div>
    <div class="child">Lorem ipsum dolor sit amet</div>
  </div>
</div>
<br>
<div class="scroll-container four">
  <div class="parent">
    <div class="child">Lorem ipsum dolor</div>
    <div class="child">Lorem ipsum dolor sit amet</div>
  </div>
</div>
<br>