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 滚动条。看看如何使用 JQuery UI 中的 Slider 控件作为滚动条。

如何做到这一点的本质是处理某种滚动事件，无论是从滑块还是从某处的实际滚动条，然后使用它的值来改变margin-top另一个 div 内部的 div 的 css 值overflow:hidden。

于 2012-04-17T14:59:08.793 回答
0

我想到的一种方法是在滚动区域内使用两个 div

类似的东西

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

然后使用 css 给“顶部” div 一个固定在顶部的位置，“底部” div 一个固定在底部的位置。您还需要为“内容”div 提供顶部和底部填充，以说明“顶部”和“底部”div。

于 2012-04-13T23:27:43.470 回答
0

如果我理解这一点，您可以定义 div 的大小或包含数字的任何内容，然后使用 css 溢出属性：

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