将滚动条放在填充区域之外。

Question

将滚动条放在填充区域之外。

htmlcss

4

如何在内容区域保持所有方向的填充同时放置垂直滚动条？下面的图片更好地描述了我所寻找的内容。

我只有显而易见的“padding：x”可以展示我的工作:( 我尝试嵌套填充，结果很有趣:)

除非真的需要，否则我想避免JavaScript。

Current and Desired look of the page

- Tina CG Hoehr

类似于这样的：http://jsfiddle.net/3V2HP/3/？ - Christoph

你为什么想要这个？它感觉非常混乱，不可用。你如何证明将滚动条与滚动框分开是有道理的？ - ANeves

@ANeves 这只是一种固定填充的感觉。有时很方便。要变得更加时髦：http://jsfiddle.net/3V2HP/4/，带有淡入淡出效果：-D - Christoph

@Christoph的淡入边缘示例很好，但我仍然坚信将滚动条与滚动内容分开是一个不好的想法（商标）。 - ANeves

@HeitorChang，请看一下我编辑后的答案，看看是否符合您的需求。 - Christoph

显示剩余2条评论

5个回答

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>

- Ryan Brodie

当我尝试过它后，它适用于整个窗口。如果需要在表格单元格或固定大小的div内使用此布局，应该怎么做？ - Heitor Chang

刚刚更新了我的答案，包含一个封装来解决那个问题，现在将对其进行测试，可能需要添加一些标签。 - Ryan Brodie

我的意思是，我不希望蓝色的填充占据整个窗口。当我改变包装器的大小时，蓝色的填充应该被限制在那个框内。 - Heitor Chang

2

浏览器负责呈现本地滚动条。我所知道的所有浏览器都会将垂直滚动条直接呈现在您的盒模型右侧。

因此，如果您想要一个不直接附加到内容的滚动条，您需要使用某种类型的JavaScript滚动条。请查看如何使用JQuery UI Slider控件作为滚动条。

做法的精髓是处理某种类型的滚动事件，无论是来自滑块还是实际滚动条的事件，然后使用它的值来更改另一个带有overflow:hidden的div中的margin-top CSS值。

- Ben Lesh

1

然而，您可以使用填充来使其“看起来”不是直接附加的。 - Christoph

0

我脑海中的一个方法是在滚动区域内使用两个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固定在底部。您还需要为“content” div设置顶部和底部填充，以适应“top”和“bottom” divs的位置。

- Dale

感谢您的帮助。无论我把顶部栏放在哪里，它都想覆盖前几个数字。另外，我希望滚动条能够一直延伸到底部栏的底部。http://jsfiddle.net/3V2HP/1/ - Tina CG Hoehr

0

如果我理解正确的话，您可以为包含数字的div或其他元素定义一个大小，然后使用css overflow属性：

div{
   overflow:scroll;
}

- WizLiz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christoph · Accepted Answer

这个示例可能是你想要的：Fiddle

此示例包含顶部和底部的渐变，当然也可以是纯色，如果你想要的话。

你可以尝试调整#content元素的内边距，但请注意，如果你想创建 passepartout 效果，你需要在右侧使用另一个元素。

#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>

编辑：更改了fiddle链接，旧链接包含渐变效果，请访问以下链接：Fiddle