溢出隐藏在css之下而不是顶部

Question

overflow-y:hidden将隐藏上部和下部的视图.我们可以只显示上半部分而不是下半部分.现在我喜欢这样的东西overflow-y-top:visible; overflow-y-bottom:hidden;
同样overflow-x-left:visible;overflow-x-right:hidden
那么我们可以用css做些什么吗？

我的具体问题:

HTML:

<div id="main">
   <div id="arrow">?</div>
   <div id="content">id="toggle_view">view more</div>
   <div id="content1"> this is any thext</div>
   <div id="content2"> this is any thext</div>
   <div id="content3"> this is any thext</div>
   <div id="content4"> this is any thext</div>
</div>

CSS:

#main {overflow-y:hidden;height:100px;position:relative}
#arrow {position:absolute;top:-30px;}
#toggle_view{position:absolute;right:0;bottom:0;}

现在我想隐藏内容而不是箭头.那么是否有一些技术可以使div的下面部分隐藏不到顶部？

Answer 1

您可以在元素的顶部添加填充,无论您想要显示多少,然后可以使用javascript将其更改为多少.如果我理解正确,你要找的是始终显示箭头/视图.所以添加一个padding-top: 20px;或任何你喜欢的测量单位应该工作

我在这里添加了一些简单的javascript以使其正常工作.你可能想要动画和所有......

看到这个jsfiddle:http: //jsfiddle.net/KPbLY/85/

要使背景不进入填充(如注释中所述),请使用另一个嵌套div,例如:

http://jsfiddle.net/KPbLY/87/