2. 程式人生 > >html頁面滾動條-scrollbar樣式（MDB風格）

html頁面滾動條-scrollbar樣式（MDB風格）

阿新 • • 發佈：2018-01-30
order spring ebe auto html purple fff pass force

.scrollbar {
　　background: #fff;
　　overflow: auto;
　　overflow-x: auto;
　　overflow-y: auto;
}

.scrollbar-primary::-webkit-scrollbar {
　　width: 12px;/*滾動條寬度*/
　　background-color: #F5F5F5;
}

.scrollbar-primary::-webkit-scrollbar-thumb {
　　border-radius: 10px;
　　-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
　　background-color: #4285F4;
}

/********************************MDB************************/


/* 滾動條樣式 start*/
.scrollbar {
background: #fff;
overflow: auto;
overflow-x: auto;
overflow-y: auto;
}

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

.scrollbar-primary::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-primary::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #4285F4;
}

.scrollbar-danger::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-danger::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-danger::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #ff3547;
}

.scrollbar-warning::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-warning::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-warning::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #FF8800;
}

.scrollbar-success::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-success::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-success::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #00C851;
}

.scrollbar-info::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-info::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-info::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #33b5e5;
}

.scrollbar-default::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-default::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-default::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #2BBBAD;
}

.scrollbar-secondary::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-secondary::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-secondary::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #aa66cc;
}

.scrollbar-juicy-peach::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-juicy-peach::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-juicy-peach::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left top, right top, from(#ffecd2), to(#fcb69f));
background-image: -webkit-linear-gradient(left, #ffecd2 0%, #fcb69f 100%);
background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
}

.scrollbar-young-passion::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-young-passion::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-young-passion::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left top, right top, from(#ff8177), color-stop(0%, #ff867a), color-stop(21%, #ff8c7f), color-stop(52%, #f99185), color-stop(78%, #cf556c),
to(#b12a5b));
background-image: -webkit-linear-gradient(left, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
}

.scrollbar-lady-lips::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-lady-lips::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-lady-lips::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#ff9a9e), color-stop(99%, #fecfef), to(#fecfef));
background-image: -webkit-linear-gradient(bottom, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}

.scrollbar-sunny-morning::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-sunny-morning::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-sunny-morning::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-linear-gradient(330deg, #f6d365 0%, #fda085 100%);
background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}

.scrollbar-rainy-ashville::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-rainy-ashville::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-rainy-ashville::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#fbc2eb), to(#a6c1ee));
background-image: -webkit-linear-gradient(bottom, #fbc2eb 0%, #a6c1ee 100%);
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}

.scrollbar-frozen-dreams::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-frozen-dreams::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-frozen-dreams::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#fdcbf1), color-stop(1%, #fdcbf1), to(#e6dee9));
background-image: -webkit-linear-gradient(bottom, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}

.scrollbar-warm-flame::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-warm-flame::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-warm-flame::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}

.scrollbar-night-fade::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-night-fade::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-night-fade::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#a18cd1), to(#fbc2eb));
background-image: -webkit-linear-gradient(bottom, #a18cd1 0%, #fbc2eb 100%);
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}

.scrollbar-spring-warmth::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-spring-warmth::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-spring-warmth::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#fad0c4), to(#ffd1ff));
background-image: -webkit-linear-gradient(bottom, #fad0c4 0%, #ffd1ff 100%);
background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
}

.scrollbar-winter-neva::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-winter-neva::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-winter-neva::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-linear-gradient(330deg, #a1c4fd 0%, #c2e9fb 100%);
background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

.scrollbar-dusty-grass::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-dusty-grass::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-dusty-grass::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-linear-gradient(330deg, #d4fc79 0%, #96e6a1 100%);
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
}

.scrollbar-tempting-azure::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-tempting-azure::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-tempting-azure::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-linear-gradient(330deg, #84fab0 0%, #8fd3f4 100%);
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

.scrollbar-heavy-rain::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-heavy-rain::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-heavy-rain::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#cfd9df), to(#e2ebf0));
background-image: -webkit-linear-gradient(bottom, #cfd9df 0%, #e2ebf0 100%);
background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}

.scrollbar-amy-crisp::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-amy-crisp::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-amy-crisp::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-linear-gradient(330deg, #a6c0fe 0%, #f68084 100%);
background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
}

.scrollbar-mean-fruit::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-mean-fruit::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-mean-fruit::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-linear-gradient(330deg, #fccb90 0%, #d57eeb 100%);
background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
}

.scrollbar-deep-blue::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-deep-blue::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-deep-blue::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-linear-gradient(330deg, #e0c3fc 0%, #8ec5fc 100%);
background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}

.scrollbar-ripe-malinka::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-ripe-malinka::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-ripe-malinka::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-linear-gradient(330deg, #f093fb 0%, #f5576c 100%);
background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
}

.scrollbar-cloudy-knoxville::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-cloudy-knoxville::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-cloudy-knoxville::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-linear-gradient(330deg, #fdfbfb 0%, #ebedee 100%);
background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

.scrollbar-morpheus-den::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-morpheus-den::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-morpheus-den::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#30cfd0), to(#330867));
background-image: -webkit-linear-gradient(bottom, #30cfd0 0%, #330867 100%);
background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}

.scrollbar-rare-wind::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-rare-wind::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-rare-wind::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#a8edea), to(#fed6e3));
background-image: -webkit-linear-gradient(bottom, #a8edea 0%, #fed6e3 100%);
background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}

.scrollbar-near-moon::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-near-moon::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-near-moon::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#5ee7df), to(#b490ca));
background-image: -webkit-linear-gradient(bottom, #5ee7df 0%, #b490ca 100%);
background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
}

.scrollbar-pink::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-pink::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-pink::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #ec407a;
}

.scrollbar-indigo::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-indigo::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-indigo::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #3f51b5;
}

.scrollbar-black::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-black::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-black::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #000;
}

.scrollbar-lady-lips::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-lady-lips::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-lady-lips::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#ff9a9e), color-stop(99%, #fecfef), to(#fecfef));
background-image: -webkit-linear-gradient(bottom, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}

.scrollbar-near-moon::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-near-moon::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-near-moon::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#5ee7df), to(#b490ca));
background-image: -webkit-linear-gradient(bottom, #5ee7df 0%, #b490ca 100%);
background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
}

.bordered-pink::-webkit-scrollbar-track {
-webkit-box-shadow: none;
border: 1px solid #ec407a;
}

.bordered-pink::-webkit-scrollbar-thumb {
-webkit-box-shadow: none;
}

.bordered-indigo::-webkit-scrollbar-track {
-webkit-box-shadow: none;
border: 1px solid #3f51b5;
}

.bordered-indigo::-webkit-scrollbar-thumb {
-webkit-box-shadow: none;
}

.bordered-black::-webkit-scrollbar-track {
-webkit-box-shadow: none;
border: 1px solid #000;
}

.bordered-black::-webkit-scrollbar-thumb {
-webkit-box-shadow: none;
}

.scrollbar-deep-purple::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-deep-purple::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-deep-purple::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #512da8;
}

.scrollbar-cyan::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-cyan::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-cyan::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #00bcd4;
}

.scrollbar-dusty-grass::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-dusty-grass::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-dusty-grass::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-linear-gradient(330deg, #d4fc79 0%, #96e6a1 100%);
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
}

.scrollbar-ripe-malinka::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-ripe-malinka::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}

.scrollbar-ripe-malinka::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-linear-gradient(330deg, #f093fb 0%, #f5576c 100%);
background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
}

.bordered-deep-purple::-webkit-scrollbar-track {
-webkit-box-shadow: none;
border: 1px solid #512da8;
}

.bordered-deep-purple::-webkit-scrollbar-thumb {
-webkit-box-shadow: none;
}

.bordered-cyan::-webkit-scrollbar-track {
-webkit-box-shadow: none;
border: 1px solid #00bcd4;
}

.bordered-cyan::-webkit-scrollbar-thumb {
-webkit-box-shadow: none;
}

.square::-webkit-scrollbar-track {
border-radius: 0 !important;
}

.square::-webkit-scrollbar-thumb {
border-radius: 0 !important;
}

.thin::-webkit-scrollbar {
width: 6px;
}

.thin::-webkit-scrollbar:horizontal{
height: 6px;
}
/* 滾動條樣式 end */

html頁面滾動條-scrollbar樣式（MDB風格）

相關推薦

html頁面滾動條-scrollbar樣式（MDB風格）

order spring ebe auto html purple fff pass force .scrollbar { 　　background: #fff; 　　overflow: auto; 　　overflow-x: auto; 　　ov

CSS設定頁面滾動條的樣式

谷歌裡面設定滾動條的樣式： /*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/  ::-webkit-scrollbar  {      width: 10px;      height: 10px;      background-color: #c1e

js實現html頁面滾動條向下拉到一定的程度時，某個div就固定在頂部，向上拉時返回原位置。

實現程式碼 <!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

html頁面懸浮框--右邊動畫（隱藏凸出）---css設置

ech ajax radius page ror url ipa ide color <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text

Vue修改mint-ui預設樣式（預設風格）

加入my-mint.css 我這裡用的postcss的變數定義，如果親們用的是其他前處理器，要改成其他處理器的定義方式 覆蓋mint-ui的primary顏色，改為自己UI的主題色 --main-color: #f76349; /* 橙色 主色調 */ .mint-header { backgrou

HTML：滾動條樣式自定義（IE/FireFox/webkit）

1.IE瀏覽器 滾動條樣式 支援情況 描述 scrollbar-3dlight-color IE特有屬性 IE5.5+ 設定滾動框的和滾動條箭頭左上邊緣的顏色 scrollbar-highlight-color

滾動條 預設樣式修改 （css）

// html結構 <div class="box"> <div class="boxItem"> <p style="height:300px;"

CSS設定滾動條樣式（相容IE）

廢話不多說，直接上demo，最下面有詳細註釋。 1、這是在webkit瀏覽器下顯示的樣式。            （個人比較喜歡簡約點的） 2、在IE瀏覽器下顯示的樣式（為了區分所以樣式寫的不一

vue2.0跳轉後頁面滾動條BUG

document 滾動 blog scrolltop def route body watch pan export default { watch:{ ‘$route‘:function(to,from){

jquery判斷頁面滾動條(scroll)是上滾還是下滾，且是否滾動到頭部或者底部

js代碼 文章 重復執行 關於 收藏 mage src start http webtouch（webapp）頁面，防蘋果手機safari瀏覽器，網上滑動，底部導航消失，滑動到底部又出現。向下滑動，底部導航出現。 遇到問題 1、我一開始用swipeup和swipe

滾動條調整樣式修改

滾動 調整 color thum radius track llb order 滑塊 ::-webkit-scrollbar { width: 18px; height: 30px; background-color: #F5F5F5; } /*定義滾動條軌道 內陰影+圓角

滾動條的樣式

滾動 IT 滑塊 corn nbsp thumb rgba 滾動條 -c ::-webkit-scrollbar { width: 15px; } /* 這是針對缺省樣式 (必須的) */ ::-webkit-scr

selenium執行js程式碼，滑動頁面滾動條

1.滾動頁面底部 js="var q=document.getElementById('id').scrollTop=10000" driver.execute_script(js)     2.滾到頁面頂部    js="var q=document.

html頁面滾動到一定位置顯示回到頂部按鈕

回到頂部按鈕在很多頁面中都會用到，具體實現效果如下： 當頁面滾動到一定位置時，頁面右下側出現固定按鈕： 當滑鼠移到按鈕上方時，有一定的動畫效果： <div class="t-right-bar"> <div class="t-bar-support" data

非常漂亮的JS外掛--------scrollReveal.js – 頁面滾動顯示動畫JS（轉）

scrollReveal.js – 頁面滾動顯示動畫JS 簡介 和 WOW.js 一樣，scrollReveal.js 也是一款頁面滾動顯示動畫的 JavaScript，能讓頁面更加有趣，更吸引使用者眼球。不同的是 WOW.js 的動畫只播放一次，而 scrollReve

jquery監聽頁面滾動條滾動事件

    $(document).scroll(function() {        var scroH = $(document).scrollTop(); //滾動高度 var viewH = $

關於polymer app無法再子頁面內使用父頁面引入的樣式（更新中）

問題解決是瓜哥解決的，我幫忙寫上部落格 英文關鍵字： Custom parent element’s style not applied to child 問題：移動端使用polymer時 子頁面無法使用父類頁面的樣式 但是在我們的web網站中是可以的， 有一個思路是用我們

使用jQuery控制頁面滾動條上下滾動

1.向上滾動  $(this).animate({ scrollTop: "-=50" }, 1000); 2.向下滾動   $(this).animate({ scrollTop: "+=50" }, 1000); 引數解讀

關於Python_UI測試頁面滾動條操作

 文章轉載至：https://www.cnblogs.com/liunaixu/p/7223675.html #！user/bin/python3 # coding=utf-8 from selenium import webdriver import time # 訪問百度 d

如何自定義CSS滾動條的樣式？

歡迎大家前往騰訊雲+社群，獲取更多騰訊海量技術實踐乾貨哦~ 本文由前端林子發表 本文會介紹CSS滾動條選擇器，並在demo中展示如何在Webkit核心瀏覽器和IE瀏覽器中，自定義一個橫向以及一個縱向的滾動條。 0.需求 有的時候我們不想使用瀏覽器預設的滾動條樣式，因為不夠定製化和美觀。那麼如