Question

我使用以下样式应用了overflov-y滚动：

.custom #front_videos .large-2 {
    height: 545px;
    overflow-y: scroll;
    position: relative;
}

显示这样的滚动 - ＆gt; http://nimb.ws/XZ3RVS

我想像这样显示滚动条 - ＆gt; http://nimb.ws/IGMnXl

所以任何人都知道如何使用CSS样式显示这样的滚动条然后重播我。

感谢。

Answer 1

我为你画了一支看起来非常相似的笔：https://codepen.io/xhynk/pen/paObed

对于CSS：

    .large-2 {
        margin-left: 30px;
        float: left;
        height: 300px;
        overflow-y: scroll;
        margin-bottom: 25px;
        width: 100px;
        background: #ccc;
    }

    .force-overflow {
        min-height: 450px;
    }

    .large-2::-webkit-scrollbar-track {
        border: 1px solid #000;
        padding: 2px 0;
        background-color: #404040;
    }

    .large-2::-webkit-scrollbar {
        width: 10px;
    }

    .large-2::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #737272;
        border: 1px solid #000;
    }

表示HTML：

    <div class="custom">
        <div id="front_videos">
            <div class="large-2">
                <div class="force-overflow"></div>
            </div>
        </div>
    </div>

Answer 2

试试这个代码段。

::-webkit-scrollbar {
width: 20px;
}

::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey; 
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background:black; 
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background:rgb(54, 56, 58);

}

Answer 3

您可以使用:: - webkit-scrollbar前缀设置滚动条的样式，但它只适用于webkit。

我认为你最好使用"jquery.mCustomScrollbar.concat.min"这个jquery插件。它支持大多数浏览器。

Answer 4

尝试一下：

::-webkit-scrollbar {
    width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4); 
}

如何更改溢出和滚动条样式

4 个答案: