如何獲得一個HTML元素的寬度溢出滾動元素內部

我有以下的html：如何獲得一個HTML元素的寬度溢出滾動元素內部

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style> 
     .item { 
      width: 500px; 
      min-width: 500px; 
      background-color: brown; 
      padding: 10px; 
      border: 5px solid white; 
      display: inline-block; 
     } 
     .wrapper { 
      width:100%; 
      overflow-y:scroll; 
      white-space:nowrap; 
     } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div id="me"> 
     <div class="item">..</div> 
     <div class="item">..</div> 
     <div class="item">..</div> 
     <div class="item">..</div> 
     </div> 
    </div> 
</body> 
</html>

如果我嘗試以下方法：

>screen.width 
1440 
>document.getElementById("me").getBoundingClientRect(); 
bottom: 56, height: 48, left: 8, right: 1415, top: 8, width: 1407

我希望寬度至少2000（4X500）加上填充等。

相反，它給我的屏幕寬度。我將用可變數量的元素填充「我」元素，這些元素必須水平滾動並需要元素的寬度。

由於內容是可變的，我不能將其設置爲一個固定的，而是要用於所述容器中的屏幕寬度的100％，並計算所述內容的所述寬度（所需的一個自定義的滾動條。）

感謝您花時間閱讀此問題。

[更新]

至於阿爾瓦羅的外觀極好的答案;這裏是我計劃使用（抱歉了jQuery）的代碼示例：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title></title> 
    <style> 
     .item { 
      width: 470px; 
      min-width: 470px; 
      background-color: brown; 
      padding: 10px; 
      border: 5px solid white; 
      display: table-cell; 
     } 
     .wrapper { 
      width:100%; 
      overflow-y:scroll; 
      white-space:nowrap; 
     } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     function addItem(){ 
      $("#me").append('<div class="item">..</div>'); 
      var box = $("#me")[0].getBoundingClientRect(); 
      output(box); 
     } 
     function removeItem(){ 
      $("#me .item").eq(0).remove(); 
      var box = $("#me")[0].getBoundingClientRect(); 
      output(box); 
     } 
     function output(box){ 
      console.log("width is:",(box.left-box.right)*-1); 
      $("#output").html("width is:"+(box.left-box.right)*-1); 
     } 
     $("#ADD").on("click",addItem); 
     $("#REMOVE").on("click",removeItem); 
    }) 
    </script> 
</head> 
<body> 
    <div class="wrapper"> 
     <div id="me" style="float:left"> 
     <div class="item">..</div> 
     <div class="item">..</div> 
     <div class="item">..</div> 
     <div class="item">..</div> 
     <div class="item">..</div> 
     <div class="item">..</div> 
     <div class="item">..</div> 
     <div class="item">..</div> 
     </div> 
    </div> 
    <div id="output"></div> 
    <input type="button" id="ADD" value="ADD" /> 
    <input type="button" id="REMOVE" value="REMOVE" /> 
</body> 
</html>

來源

2015-09-29 HMR

如果添加：

#me {float:left;}

javascript可能會給你的窗口的你的元素insteed右側寬度寬度。

我與此jquery測試它：

var meWidth = $('#me').outerWidth(true); 
$('.test').css({ 
    'width': meWidth + 'px' 
});

添加寬度獲取對div我稱爲.test

JSFIDDLE

注：outerWidth(true)計算寬度+填充+邊界+餘量。在你的例子中：2132px。

來源

2015-09-29 08:14:25

這樣做的伎倆，我用我打算使用的代碼更新了答案。太糟糕了'white-space：nowrap;'在IE中不起作用 – HMR

很高興我可以幫助你並且贊同你的項目......（順便說一句，只要我知道空白屬性在IE下工作（如果8以上） –

正確，我使用的是IE7兼容模式 – HMR

如何獲得一個HTML元素的寬度溢出滾動元素內部

回答

相關問題