如何使用溢出滚动获取元素内html元素的宽度答案

【问题标题】：How to get the width of a html element inside an element with overflow scroll如何使用溢出滚动获取元素内html元素的宽度
【发布时间】：2015-09-29 05:13:49
【问题描述】：

我有以下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) 加上填充等。

相反，它给了我屏幕宽度。我将使用可变数量的元素填充“me”元素，这些元素必须水平滚动并需要元素的宽度。

由于内容是可变的，我无法将其设置为固定值，而是希望将 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>

【问题讨论】：

标签： html css width horizontal-scrolling

【解决方案1】：

如果你添加：

#me {float:left;}

javascript 可能会为您提供元素的正确宽度，而不是窗口的宽度。

我用这个jquery测试了它：

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

将宽度添加到我称为.test的div

JSFIDDLE

注意：outerWidth(true ) 计算宽度 + 内边距 + 边框 + 边距。在您的示例中：2132px。

【讨论】：

成功了，我用我打算使用的代码更新了答案。太糟糕了white-space:nowrap; 在 IE 中不起作用
很高兴我能为您的项目提供帮助和 gl...（顺便说一句，只要我知道空白属性在 IE 下工作（如果以上 8 个）。
嗯，截至 2015 年 8 月，全世界只有 6.6% 的人使用 IE（任何版本），而 ie7 的使用率仅为 0.2%。我认为我们中的任何人都不应该花费任何资源、时间和金钱来为 ie7 制作网站（这太难了），但是 ofc，这不是我的决定，希望你没有任何“那些”类型的客户:) : w3schools.com/browsers/browsers_explorer.asp
我知道，但我 99.9% 的客户都在使用它，因为他们位于雷德蒙德并且是 IE 的创建者；-) 我很高兴它适用于 IE 8 及更高版本，因此可以继续使用这个解决方案。害怕我会被困在基于 json 数据找出 with 的问题上，但这每次我更改 UI 设计时都会让我非常头疼。 IE8 已经足够好了，因为大多数桌面都是最新的并且使用的不亚于 IE11