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

发布于 2024-10-05 13:57:31 字数 510 浏览 5 评论 0原文

我需要一个特定宽度的垂直可滚动 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 功能。

原文

I need a vertically scrollable div of a specific width. However, setting the width to, say, 200px will actually give me (for example) 190px of available space, and 10px of scrollbar, e.g.

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

Because it's lacking the width of the scrollbar as actual space, I end up with a minimal, almost useless (and very ugly) horizontal scrollbar.

Is there a way to either get the scrollbar size (besides getting the difference with the next element, feels too hackish) or to just say "width-without-scrollbar: 200px"?

I'm using jQuery, a (more) dynamic solution using jQuery is also acceptable (but I'd rather not use jQuery scrollbar implementations, if possible I want to stick to native scrollbars).

Also, I'd rather not depend on CSS3 features.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

慕烟庭风 2024-10-12 13:57:36

考虑使用
溢出-x：隐藏

回复收藏 0 原文

静若繁花 2024-10-12 13:57:35

为了回答我自己的问题（但仍在寻找替代方案），使用 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 宽区域（并删除水平滚动条）

To answer my own question (but still looking for alternatives), calculating the difference using a 100% width "detector" and then resizing does the trick for me. As I said, using Javascript to fix this is not a problem in my case but this is probably not how you want to style your own website :)

<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>

This will calculate the difference between the available space (which will be 200) and the used space by the "detector" (which is, for example, 185px). This means the scrollbar size is 15px. Making #outer 15px wider will give us a full 200px-wide area (and remove the horizontal scrollbar)

回复收藏 0 原文

~没有更多了~