将滚动条放在填充区域外 [英] Putting a scrollbar outside padded region

问题描述

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

此示例包含顶部和底部的渐变

你可以使用 #content Element，但请注意，如果您要创建一个passepartout-effect，您需要在右侧添加一个元素。

  #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;}。 absolute; width：50px; height：280px; background-color：#bcd;}＃topbar {top：0; } #bottombar {bottom：0;}＃leftbar {top：0; } #rightbar {right：20px; top：0;}  

 < div id = > < div id =topbarclass =bar> < / div> < div id =contentclass =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 =bottombarclass =bar>< / div>< / div>  

编辑：
更改了小提琴链接，带有渐变的旧链接如下：小提琴

How can I place a vertical scrollbar while keeping padding in all directions at all times in the content area? The picture below better describes what I am looking for.

I only have the obvious "padding: x" to show for my work :( I tried nesting padding and it was hilarious :)

I would like to avoid JavaScript unless it is really needed.

解决方案

This fiddle might be, what you want: Fiddle

This example contains gradients for the top and bottom parts but can be solid colors of course, if you want that.

You can play around with the padding of the #content Element, but note, that you need an additional element to the right, if you want to create a passepartout-effect.

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

edit: changed the fiddle link, the old link with the gradients is the following: Fiddle

这篇关于将滚动条放在填充区域外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！