使用纯CSS从底部开始div滚动条

Question

是否可以使用纯CSS从底部（而不是始终作为初始位置）而不是从顶部开始div的滚动条？

Answer 1

使用transform:rotateX来包装div并在sub div中返回它（以避免文本翻过来）

.page{
 overflow-y: scroll;

 width:150px;
 height:150px;
 transform:rotateX(180deg);
                -moz-transform:rotateX(180deg); /* Mozilla */
                -webkit-transform:rotateX(180deg); /* Safari and Chrome */
                -ms-transform:rotateX(180deg); /* IE 9+ */
                -o-transform:rotateX(180deg); /* Opera */
}
.sub{
   transform:rotateX(180deg);
                -moz-transform:rotateX(180deg); /* Mozilla */
                -webkit-transform:rotateX(180deg); /* Safari and Chrome */
                -ms-transform:rotateX(180deg); /* IE 9+ */
                -o-transform:rotateX(180deg); /* Opera */
}

    <div class="page">
    <div class="sub">
       <p>This is some text in a paragraph.</p>
    <p>This is some text in a paragraph.</p>
    <p>This is some text in a paragraph.</p>
    <p>This is some text in a paragraph.</p>
    <p>This is some text in a paragraph.</p>
    <p>This is some text in a paragraph.</p> 
    </div>

    </div>

Answer 2

此实现有两个问题： 1.）您可能有渲染伪像（字体变得头晕） 2.）滚动方向可能会还原。 这两个效果出现在当前的firefox版本中。