獲取固定寬度的可滾動區域

我需要一個特定寬度的可垂直滾動的div。然而，將寬度設置爲例如200px實際上會給我（例如）190px的可用空間和10px的滾動條，例如獲取固定寬度的可滾動區域

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

因爲它缺乏作爲滾動條實際空間的寬度，我結束了一個最小的，幾乎是無用的（而且很醜陋）水平滾動條。

有沒有辦法要麼獲得滾動條的大小（除了獲得與未來元素的差別，感覺太的hackish），或只說「寬度不-滾動條：200像素」？

我使用jQuery，使用jQuery一（多）動態的解決方案是可以接受的（但我寧可不使用jQuery的滾動條實現中，如果可能的話我想堅持到本機滾動條）。

而且，我寧願不依賴於CSS3功能。

來源

2010-12-02 Ivo van der Wijk

要回答我自己的問題（但仍然在尋找替代品），計算使用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）以及「探測器」（例如，185像素）使用的空間。這意味着滾動條的大小是15px。製作#outer 15px的廣泛會給我們一個完整的200像素寬的區域（和刪除水平滾動條）

來源

2010-12-02 12:03:14

考慮的使用溢出-X：隱藏

來源

2010-12-31 10:13:30

我認爲只有是CSS3。 – 2011-01-01 09:07:39

獲取固定寬度的可滾動區域

回答

相關問題