如何在固定溢出中滚动子卷:隐藏父级？

Question

我有固定位置父母与overflow:hidden旋转。我希望它中的子元素能够滚动。

由于某些原因，即使我在子级和高度上声明了overflow: scroll，滚动也确实发生了，只是似乎被卡住了。

下面是一个例子

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);
}

Answer 1

您可以设置.papa{高度全窗口大小100%可定位值集，请尝试这样做，

检查这个jsFiddle

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

Answer 2

找到解决方案后，必须为父元素设置height，并且它能够工作。这是更新的例子，如果有人需要的话。