<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.box{
height: 2000px
}
::-webkit-scrollbar {/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
overflow: auto;
}
.box2{
width: 100px;
height: 200px;
background-color: #fff;
}
</style>
</head>
<body>
<div id="app">
<el-scrollbar :native="false" wrapStyle="" wrapClass="" viewClass="" viewStyle="" noresize="false" tag="section">
<div class="box test-1">
<el-date-picker
v-model="value1"
type="datetime"
placeholder="选择日期时间">
</el-date-picker>
{{value1}}
<div class="box1">
<div class="box2"></div>
</div>
</div>
</el-scrollbar>
</div>
</body>
<!-- import Vue before Element -->
<script src="./vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
value1:""
}
},
created(){
}
,
methods: {
}
})
</script>
</html>
element-ui的滚动条
