我需要一个特定宽度的可垂直滚动的 div。但是，将宽度设置为 200px 实际上会给我(例如)190px 的可用空间和 10px 的滚动条，例如
#area {
display: inline-block;
width: 200px;
overflow: auto;
}
...
<div id="area">(data using max. 200px of width)</div>
因为它缺少滚动条的宽度作为实际空间，所以我最终得到了一个最小的、几乎无用(而且非常丑陋)的水平滚动条。
有没有办法获取滚动条的大小(除了与下一个元素的差异之外，感觉太老套了)或者只是说“width-without-scrollbar: 200px”？
我正在使用 jQuery，使用 jQuery 的(更多)动态解决方案也是可以接受的(但我宁愿不使用 jQuery 滚动条实现，如果可能的话我想坚持使用 native 滚动条)。
此外，我不想依赖 CSS3 功能。
最佳答案
为了回答我自己的问题(但仍在寻找替代方案)，使用 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 宽区域(并删除水平滚动条)
关于jquery - 获取固定宽度的可滚动区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4334366/