5

div に Webkit スクロールバーが接続されています。body 要素でオーバーフロー プロパティを非表示に設定して、デフォルトのスクロールバーを無効にしました。divに接続されているスクロールバーは見えますが、親指が見えないため、スクロールできません。スクロールバーがアタッチされている div には id="container" があります。これがcssです-

html
{
}    
body 
{
   overflow-y:hidden;
   overflow-x:hidden;
}

#container
{ 
    height:100%;
    overflow-x:hidden;
    overflow-y:scroll;
}

#Title
{

   padding-bottom: 10px;
}

table
{
   width: 100%;
   table-layout: fixed; 
}

#container::-webkit-scrollbar
{
   background: transparent;
   width: 12px;
} 

#container::-webkit-scrollbar-track 
{
   -webkit-box-shadow: inset 0 0 6px rgba(10,11,12,0.3);
  /*  border-radius: 10px; */
}

#container::-webkit-scrollbar-thumb 
{
    border-radius: 10px;
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    background:rgba(104,102,102,0.8);
}

コンテナーは、div (id="Title" を使用) とテーブルをホストします。テーブルには多くのコンテンツがあるため、スクロールが発生するはずですが、残念ながらそうではありません。誰かが私が間違っていることを指摘できれば、それは素晴らしいことです。ありがとう！

編集：htmlを追加 -

<body>
<div id="container">
<div id="Title">
   <span id="Heading_part_1">abc</span>
   <span id="Heading_part_2">xyz</span>
   <span id="Heading_part_3">pqr</span>
   <span id="Timestamp"></span>
   <span id="WrenchIconContainer" onclick="togglemenu();">
       <input type="image" src="res/wrench-arrow-icon.png" width="18px" height="18px"/>
   </span>
   <div id="menu_container" style="display:none">
       <p id="id1">sfdf</p><p id="id2" onclick="dosomething();">ffsdf</p>
   </div>
</div>
<table id="table1" cellspacing="0" width="auto">
<thead>
<tr>
    <th id = "headline" width="85%"></th>
    <th id = "storytime" width="15%"></th>
</tr>
    </thead>
<tbody>
</tbody>
</table>
</div>
</body>
4

1 に答える 1

5

あなた#containerの高さは 100% であるため、スクロールバーの「サム」が表示される理由はありません。なぜなら、コンテナーは実際にはコンテンツ全体を収めるのに十分な大きさだからです。固定のピクセルの高さを指定すると、「親指」が表示され、美しく機能します。ここに例があります。

コンテナをさらに別のラッパーでラップして渡すとposition: relative;、コンテナの高さを 100% のままにすることができますが、

position: absolute;
top: 0;
left: 0;

あなたが実際にやろうとしているのが、ページのメイン ブラウザのスクロール バーを置き換えることである場合は、 、、およびセレクター#containerを body に置き換えるだけです。::-webkit-scrollbar::-webkit-scrollbar-track::-webkit-scrollbar-thumb

于 2012-09-12T21:27:23.387 に答える