css 实现滚动条放在元素顶部或左边

• #css

一、滚动条放在元素顶部

水平滚动条默认放在元素底部。如果想将滚动条放在元素顶部，代码实现如下：

<style>
    .outer {
        width: 200px;
        height: 100px;
        border: 1px solid #ccc;
        overflow-y: hidden;
        overflow-x: auto;
        /* 绕x轴旋转180°,滚动条会跑到顶部，内容文字也会颠倒 */
        transform: rotateX(180deg);
    }

    .inner {
        width: 400px;
        height: 100%;
        /* 内容文字再绕x轴旋转180°，内容文字由颠倒又会变成正常 */
        transform: rotateX(180deg);
    }
</style>

<div class="outer">
    <div class="inner">
        滚动条在元素顶部
    </div>
</div>

二、滚动条放在元素左边

垂直滚动条默认放在元素右边。如果想将滚动条放在元素左边，代码实现如下：

实现方式一：transform 绕 y 轴旋转 180°

<style>
    .outer {
        width: 200px;
        height: 100px;
        border: 1px solid #ccc;
        overflow-x: hidden;
        overflow-y: auto;
        /* 绕y轴旋转180°,滚动条会跑到左边，内容文字也会颠倒 */
        transform: rotateY(180deg);
    }

    .inner {
        height: 200px;
        /* 内容文字再绕y轴旋转180°，内容文字由颠倒又会变成正常 */
        transform: rotateY(180deg);
    }
</style>

<div class="outer">
    <div class="inner">
        滚动条在元素左边
    </div>
</div>

实现方式二：direction: rtl

<style>
    .outer {
        width: 200px;
        height: 100px;
        border: 1px solid #ccc;
        overflow-y: auto;
        /* 从右往左布局，滚动条自然就在左边，但内容文字也是从右往左布局的 */
        direction: rtl;
    }

    .inner {
        height: 200px;
        /* 设置内容文字从左往右布局 */
        direction: ltr;
    }
</style>

<div class="outer">
    <div class="inner">
        滚动条在元素左边
    </div>
</div>

↶ 返回首页