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

Question

是否有可能只用纯CSS让一个div的滚动条从底部开始（作为初始位置而非总是从顶部开始）？

- Nadav Shabtai

---

可能是这个的重复问题 https://dev59.com/PYHba4cB1Zd3GeqPXu_m - Arun Kumar

据我所知，您必须使用 JavaScript/jQuery。 - לבני מלכה

@ArunKumar 只有在不需要 overflow-x 的情况下才有帮助，否则请看这里：https://jsfiddle.net/5oredxLj/2/ - לבני מלכה

@לבנימלכה 在示例中，文本也是倒置的。 - Nadav Shabtai

你需要 overflow-x 是因为我向他展示的原因吗？ - לבני מלכה

Answer 1

使用transform:rotateX将div进行旋转并返回它（以避免文字翻转），同时在子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>

- לבני מלכה

---

that what you need - לבני מלכה

很高兴能够帮忙 :) - לבני מלכה

这个解决方案将我的滚动方向反转。 - Thomas Potaire