Getting a fixed-width scrollable area_问答_开发者

开发者 https://www.devze.com 2023-01-28 04:23 出处：网络

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 spa开发者_开发问答ce, and 10px of scrollbar, e.

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

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)

Consider usage of overflow-x: hidden