如何在溢出滚动的元素内获取 html 元素的宽度

Question

我有以下 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>

Answer 1

如果您添加：

#me {float:left;}

javascript 可能会给您正确的元素宽度而不是 window 的宽度。

我用这个测试过 jquery:

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

将宽度添加到 div 我调用了 .test

JSFIDDLE

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

如何在溢出滚动的元素内获取 html 元素的宽度

How to get the width of a html element inside an element with overflow scroll

html

css

width

horizontal-scrolling