Question

我需要一个特定宽度的垂直可滚动div。但是，将宽度设置为200px实际上会给我（例如）190px的可用空间和10px的滚动条，例如

#area {
  display: inline-block;
  width: 200px;
  overflow: auto;
}
...
<div id="area">(data using max. 200px of width)</div>

因为它缺少滚动条的宽度作为实际空间，所以我最终得到了一个最小的，几乎没用的（并且非常难看）水平滚动条。

有没有办法获得滚动条大小（除了得到与下一个元素的区别，感觉太过于hackish）或者只是说“width-without-scrollbar：200px”？

我正在使用jQuery，使用jQuery的（更多）动态解决方案也是可以接受的（但我宁愿不使用jQuery滚动条实现，如果可能的话，我想坚持使用原生滚动条）。

另外，我宁愿不依赖CSS3功能。

Answer 1

要回答我自己的问题（但仍在寻找替代方案），使用100％宽度的“探测器”计算差异然后调整大小对我来说是个窍门。正如我所说，使用Javascript来解决这个问题在我的情况下不是问题，但这可能不是你想要为自己的网站设计样式的方式：）

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <style type="text/css">
        #outer {
                display: inline-block;
                width: 200px;
                height: 100px;
                overflow: auto;
        }
        .detector {
               width: 100%;
               height: 0px;
        }
        .entry {
                display: inline-block;
                width: 200px;
        }
        </style>
        <script type="text/javascript">
            $(document).ready(function() {
               var outer = $("#outer");
               var detector = $("#outer .detector");
               var scrollsize = 200 - detector.width();
               outer.width(200 + scrollsize);
            });
        </script>
</head>
<body>
<div id="outer">
   <div class="detector">
   </div>
   <div class="entry">
   I'm a short entry
   </div>
   <div class="entry">
   I'm an entry div but I'm very, very, very, very, very, very, very, very, very, very long
   </div>
   <div class="entry">
   I'm an entry div but I'm very, very, very, very, very, very, very, very, very, very long
   I'm an entry div but I'm very, very, very, very, very, very, very, very, very, very long
   </div>
</div>
</body>
</html>

这将计算可用空间（将为200）与“探测器”（例如，185px）使用的空间之间的差异。这意味着滚动条大小为15px。使#outer 15px更宽将为我们提供一个200px宽的完整区域（并删除水平滚动条）

Answer 2

考虑使用 overflow-x：隐藏

获得固定宽度的可滚动区域

2 个答案: