滾動條樣式優化(CSS3自定義滾動條樣式 -webkit-scrollbar)

時間 2019-11-18

標籤滾動條樣式優化 css3 css 自定義 webkit scrollbar 欄目 CSS 简体版

原文原文鏈接

有時候以爲瀏覽器自帶的原始滾動條不是很美觀，那webkit瀏覽器是如何自定義滾動條的呢？css

Webkit支持擁有overflow屬性的區域，列表框，下拉菜單，textarea的滾動條自定義樣式。固然，兼容全部瀏覽器的滾動條樣式目前是不存在的。html

::-webkit-scrollbar 滾動條總體部分
::-webkit-scrollbar-thumb 滾動條裏面的小方塊，能上下左右移動(取決因而垂直仍是水平)
::-webkit-scrollbar-track 滾動條的軌道(裏面裝有thumb)
::-webkit-scrollbar-button 滾動條軌道兩端的按鈕，容許經過點擊微調小方塊的位置
::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分(除去)
::-webkit-scrollbar-corner 邊角，及兩個滾動條的交匯處
::-webkit-resizer 兩個滾動條的交匯處上用於拖動調整元素大小的小控件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrollbar</title>
</head>
<style type="text/css">web

.scrollbar1{
margin:20px auto;
width:200px;
height:100px;
overflow: auto;
}瀏覽器

.scrollbar2{
margin:20px auto;
width:200px;
height:100px;
overflow: auto;
}優化

/*定義滾動條寬高及背景,寬高分別對應橫豎滾動條的尺寸*/
.scrollbar1::-webkit-scrollbar{
width:16px;
height:16px;
background-color:#f5f5f5;
}
/*定義滾動條的軌道,內陰影及圓角*/
.scrollbar1::-webkit-scrollbar-track{
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
border-radius:10px;
background-color:#f5f5f5;
}
/*定義滑塊,內陰影及圓角*/
.scrollbar1::-webkit-scrollbar-thumb{
height:20px;
border-radius:10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color:#555;
}url

// scrollbarspa

.scrollbar2::-webkit-scrollbar-corner {
background-color: transparent;
}code

.scrollbar2::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}htm

.scrollbar2::-webkit-scrollbar-thumb {
width: 7px;
background-color: #b4babf;
border-radius: 7px;
}blog

.scrollbar2::-webkit-scrollbar {
width: 7px;
height: 7px;
}

.scrollbar2::-webkit-scrollbar-track {
width: 15px;
}

.scrollbar2::-webkit-scrollbar:hover {
background-color: transparent;
}
.btns{
width: 400px;
height: 50px;
text-align: center;
margin:100px auto 0 auto;
}
button
{
text-decoration:none;
background:#47B2EA;
color:#f2f2f2;

padding: 10px 30px 10px 30px;
font-size:16px;
font-family: 微軟雅黑,宋體,Arial,Helvetica,Verdana,sans-serif;
font-weight:bold;
border-radius:3px;

-webkit-transition:all linear 0.30s;
-moz-transition:all linear 0.30s;
transition:all linear 0.30s;
}
button:hover{
cursor: pointer;
opacity: 0.8;
}
</style>

<body>
<div class="btns">
<button class="one">樣式1</button>
<button class="two">樣式2</button>
</div>
<div id='show' class="scrollbar1">番茄工做法是弗朗西斯科·西里洛於1992年創立的一種相對於GTD更微觀的時間管理方法。使用番茄工做法，選擇一個待完成的任務，將番茄時間設爲25分鐘，專一工做，中途不容許作任何與該任務無關的事，直到番茄時鐘響起，而後在紙上畫一個X短暫休息一下（5分鐘就行），每4個番茄時段多休息一下子。</div>
<script>
var show=document.querySelector("#show")
var one=document.querySelector(".one")
var two=document.querySelector(".two")
one.onclick=function(){
show.className="scrollbar1"
}
two.onclick=function(){
show.className="scrollbar2"
}
</script>
</body>
</html>

導航條優化

div {
    background: #2b2e37;
    height: 200px;
    position: relative
    background:url('bg.jpg')
}
div:before {
    background:url('bg.jpg')
    content: "";
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    bottom: 0;
    background: #2b2e37;
    filter: blur(10px);
    z-index: 0;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。