本文介绍: 如果要出现水平滚动条,则: overflowx:auto。如果要垂直滚动条则为: overflowy:auto。注意:一定要设置宽高

1、

overflow:hidden;
overflow:scroll;

2、

如果要出现水平滚动条,则: overflowx:auto

如果要垂直滚动条则为: overflowy:auto

注意:一定要设置宽高

width:400px; height:400px;

3、纯色滚动

/* 整个滚动条 */
::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 10px;
    /* 对应横向滚动条的宽度 */
    height: 10px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #dbeffd;
    border-radius: 32px;
}

4、花色滚动条

/* 整个滚动条 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    /* 关键代码 */
    background-image: -webkit-linear-gradient(45deg,
            rgba(255, 255, 255, 0.4) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0.4) 75%,
            transparent 75%,
            transparent);
    border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #dbeffd;
    border-radius: 32px;
}

参考链接

http://t.csdn.cn/mTtW9

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注