Permalink
Switch branches/tags
Nothing to show
Find file Copy path
3345655 Jul 31, 2017
1 contributor

Users who have contributed to this file

214 lines (183 sloc) 8.59 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义滚动条样式</title>
<style>
.text-clip {
width: 220px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.parent {
overflow: auto;
}
.box {
float: left;
width: 150px;
height: 250px;
margin: 0 40px 40px 0;
border: 1px solid #eee;
}
.box1 {
overflow: visible;
}
.box2 {
overflow: hidden;
}
.box3 {
overflow: scroll;
}
.box4 {
overflow: auto;
}
.box5 {
overflow: inherit;
}
.box6,
.box7,
.box8,
.box9,
.box10 {
overflow-y: scroll;
}
.box6::-webkit-scrollbar {
width: 10px;
}
.box6::-webkit-scrollbar-track {
border-radius: 5px;
background-color: #eee;
}
.box6::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #3DB6A4;
}
.box7::-webkit-scrollbar {
width: 6px;
}
.box7::-webkit-scrollbar-track {
background-color: #eee;
}
.box7::-webkit-scrollbar-thumb {
background: #3DB6A4;
}
.box8::-webkit-scrollbar {
width: 12px;
background-color: #eee;
}
.box8::-webkit-scrollbar-track {
background-color: #eee;
}
.box8::-webkit-scrollbar-thumb {
background: #3DB6A4;
}
.box8::-webkit-scrollbar-button:start {
background: url(./imgs/up.png) no-repeat;
background-size: 12px 12px;
}
.box8::-webkit-scrollbar-button:end {
background: url(./imgs/down.png) no-repeat;
background-size: 12px 12px;
}
.box9 {
overflow: scroll;
}
/*width为垂直滚动条的宽度,height为水平滚动条的高度*/
.box9::-webkit-scrollbar {
width: 12px;
height: 12px;
}
.box9::-webkit-scrollbar-track {
background-color: #eee;
}
.box9::-webkit-scrollbar-thumb {
background: #3DB6A4;
}
/*自定义交汇处*/
.box9::-webkit-scrollbar-corner {
background: url(./imgs/jiaocha.png) no-repeat;
background-size: 12px 12px;
}
.box10::-webkit-scrollbar {
width: 12px;
}
.box10::-webkit-scrollbar-track {
background-color: #eee;
}
.box10::-webkit-scrollbar-thumb {
background: #3DB6A4;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}
.box10::-webkit-scrollbar-track-piece{
background-color:#eee;
}
.box10::-webkit-scrollbar-button:start {
background: url(./imgs/up.png) no-repeat;
background-size: 12px 12px;
}
.box10::-webkit-scrollbar-button:end {
background: url(./imgs/down.png) no-repeat;
background-size: 12px 12px;
}
</style>
</head>
<body>
<h3 class="text-clip">下面是overflow属性值巴拉巴拉巴拉巴拉啦啦啦啦</h3>
<div class="parent">
<div class="box box1">
<h4>overflow:visible,我是box1</h4>
<p>这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要, 用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也 会出现滚动条。
</p>
</div>
<div class="box box2">
<h4>overflow:hidden,我是box2</h4>
<p>这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要, 用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也 会出现滚动条。
</p>
</div>
<div class="box box3">
<h4>overflow:scroll,我是box3</h4>
<p>这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要, 用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也 会出现滚动条。
</p>
</div>
<div class="box box4">
<h4>overflow:auto,我是box4</h4>
<p>这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要, 用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也 会出现滚动条。
</p>
</div>
<div class="box box5">
<h4>overflow:inherit,我是box5</h4>
<p>此处父元素设置的是auto。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要, 用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也 会出现滚动条。
</p>
</div>
</div>
<h3 class="text-clip">下面是自定义滚动条样式巴拉巴拉巴拉巴拉啦啦啦啦</h3>
<div class="scroll-wrap">
<div class="box box6">
<p>这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要, 用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也 会出现滚动条。 这个属性定义溢出元素内容区的内容会如何处理。如果值为
scroll,不论是否需要, 用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也 会出现滚动条。
</p>
</div>
<div class="box box7">
<p>这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要, 用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也 会出现滚动条。 这个属性定义溢出元素内容区的内容会如何处理。如果值为
scroll,不论是否需要, 用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也 会出现滚动条。
</p>
</div>
<div class="box box8">
<p>这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要, 用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也 会出现滚动条。 这个属性定义溢出元素内容区的内容会如何处理。如果值为
scroll,不论是否需要, 用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也 会出现滚动条。
</p>
</div>
<div class="box box9">
<p>这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要, 用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也 会出现滚动条。 这个属性定义溢出元素内容区的内容会如何处理。如果值为
scroll,不论是否需要, 用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也 会出现滚动条。
</p>
</div>
<div class="box box10">
<p>这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要, 用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也 会出现滚动条。 这个属性定义溢出元素内容区的内容会如何处理。如果值为
scroll,不论是否需要, 用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也 会出现滚动条。
</p>
</div>
</div>
</body>
</html>