固定幅スクロール領域の取得

特定の幅の垂直スクロール可能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を使った（もっと）動的ソリューションも受け入れられますが（可能であれば、私はネイティブスクロールバーに固執したいと考えています）。

また、私はむしろ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」）と「検出器」（例えば185px）によって使用された空間が表示されます。つまり、スクロールバーのサイズは15pxです。広い15ピクセル#outer作ること

出典

2010-12-02 12:03:14

はの使用を考えてみましょう私たちのフル200pxの全体の面積を与える（と水平スクロールバーを削除）しますオーバーフロー-X：

出典

2010-12-31 10:13:30

隠された私は、それが唯一のCSS3だと思います。 –

とにかく試してみてください。 –

固定幅スクロール領域の取得

答えて

関連する問題