如何在固定溢出中滚动子项：隐藏父项？

时间：2014-03-15 13:15:25

标签： css css3

我使用overflow:hidden旋转固定位置。 我希望其中的子元素能够滚动。

出于某种原因，即使我在孩子和身高上声明overflow: scroll，滚动确实会发生，但似乎卡住了。

Here is an example

HTML：

<div class="papa">

<div class="child">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.

</div>

</div>

CSS：

.papa{
position: fixed;
top: 10px;
left: 0;
overflow: hidden;
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}

.child{
    overflow: scroll;
    height: 10%;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

2 个答案:

答案 0 :(得分：0)

找到解决方案，必须为父元素设置height并且它设法工作。 如果有人需要，这是updated example。

答案 1 :(得分：0)

您可以设置.papa{高度全窗口大小100%可设置的值，尝试这种方式，

检查此jsFiddle 

.papa{
    height: 100%;
    position: fixed;
    top: 10px;
    left: 0;
    overflow: hidden;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
}
相关问题
最新问题