4

コンテンツ領域で常にすべての方向にパディングを維持しながら、垂直スクロールバーを配置するにはどうすればよいですか？下の写真は、私が探しているものをよりよく説明しています。

私は自分の仕事のために示す明白な「パディング：x」しか持っていません:(私はパディングを入れ子にしてみました、そしてそれは陽気でした:)

本当に必要な場合を除いて、JavaScriptは避けたいと思います。

ページの現在および望ましい外観

4

5 に答える 5

14

このフィドルは、あなたが望むものかもしれません：フィドル

この例には、上部と下部のグラデーションが含まれていますが、必要に応じて、もちろん単色にすることもできます。

要素のパディングをいじることができ#contentますが、パスパルトゥー効果を作成する場合は、右側に追加の要素が必要であることに注意してください。

#container{
position:relative;
height:300px;
width:300px;
}
#content{
height:200px; 
width: 200px;
padding: 50px;
overflow-y: auto;
background-color: #cef;
}
.bar {
position:absolute;
width: 280px;
height: 50px;
background-color:#bcd;
}
.vbar {
position:absolute;
width: 50px;
height: 280px;
background-color:#bcd;
}
#topbar{
top:0;        
}
#bottombar{
bottom:0;
}
#leftbar{
top:0;        
}
#rightbar{
right:20px;        
top:0;
}
<div id="container">
    <div id="topbar" class="bar"> </div>
    <div id="content" class="pad">
        1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15<br> 16<br> 17<br> 18<br> 19<br> 20<br> 21<br> 22<br> 23<br> 24<br> 25<br> 26<br> 27<br> 28<br> 29<br> 30<br> 31<br> 32<br> 33<br> 34<br> 35<br> 36<br> 37<br> 38<br> 39<br> 40<br> 41<br> 42<br>
    </div>
    <div id="bottombar" class="bar"></div>
</div>

編集：フィドルリンクを変更しました。グラデーションのある古いリンクは次のとおりです：フィドル

于 2012-04-17T14:31:25.247 に答える
3

Divでそれを行います。CSS：

<style type="text/css">
div#top {
    margin: 0px;
    padding: 0px;
    height: 100px;
    width: 100%;
    background-color: #97cee0;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
}
div#left {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100px;
    background-color: #97cee0;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
}
div#right {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100px;
    background-color: #97cee0;
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 100;
}
div#bottom {
    margin: 0px;
    padding: 0px;
    height: 100px;
    width: 100%;
    background-color: #97cee0;
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 100;
}
div#content {
    z-index: 0;
    padding: 100px;
}
div#wrapper {
overflow: scroll;
}
</style>

HTML：

<div id="wrapper">
    <div id="top"></div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="bottom"></div>
    <div id="content">Long list of stuff.</div>
</div>
于 2012-04-17T13:53:14.970 に答える
2

ブラウザは、ネイティブスクロールバーのレンダリングを担当します。私が知っているすべてのブラウザは、ボックスモデルの右側に垂直スクロールを直接レンダリングします。

したがって、コンテンツに直接接続されていないスクロールバーが必要な場合は、何らかのjavascriptスクロールバーを使用する必要があります。JQueryUIのSliderコントロールをスクロールバーとして使用する方法をご覧ください。

これを行う方法の本質は、スライダーまたはどこかの実際のスクロールバーからのある種のスクロールイベントを処理し、その値を使用してmargin-top、別のdiv内にあるdivのcss値を。で変更することoverflow:hiddenです。

于 2012-04-17T14:59:08.793 に答える
0

頭のてっぺんから離れたアプローチの1つは、スクロール領域内で2つのdivを使用することです。

これに似たもの

<div>
    <div class="top"></div>
    <div class="content">1, 2, 3, 4, 5, 6 ....</div>
    <div class="bottom"></div>
</div>

次に、cssを使用して、「top」divを上部の固定位置に、「bottom」divを下部の固定位置にします。また、「上」と「下」のdivを考慮して、「コンテンツ」のdivに上と下のパディングを付ける必要があります。

于 2012-04-13T23:27:43.470 に答える
0

私がこの権利を理解している場合は、divのサイズまたは数値を含むものを定義してから、cssオーバーフロープロパティを使用できます。

div{
   overflow:scroll;
}
于 2012-04-13T23:28:06.637 に答える