css 自定义滚动条样式
我遇到的场景:
对于iframe窗口,自带滚动条是整个窗口的大小。有时需要顶部或底部固定,则滚动条不应该触碰到顶部或底部。
那么首先打开iframe时应该去掉滚动条 scrolling="no",然后在需要滚动的区域自定义滚动条。
自定义滚动条代码如下:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动title>
<style>
.scroll_contain{
overflow-y: scroll;
border: none;
}
.scroll_config::-webkit-scrollbar {/*滚动条整体样式*/
width:5px;
height:5px
}
.scroll_config::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
background-color:#ccc;
border:solid 1px #ccc;
border-radius:2px;
}
.scroll_config::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 2px;
background: #EDEDED;
}
.scroll_config::-webkit-scrollbar-arrow {
color:#F00;
background:#0F0;
}
style>
head>
<body>
<div class="scroll_contain scroll_config" style="height: 200px;width: 200px">
<div>
东方不败东方不败东方不败东方不败东方不败东方不败
东方不败东方不败东方不败东方不败东方不败东方不败
东方不败东方不败东方不败东方不败东方不败东方不败
东方不败东方不败东方不败东方不败东方不败东方不败
东方不败东方不败东方不败东方不败东方不败东方不败
东方不败东方不败东方不败东方不败东方不败东方不败
东方不败东方不败东方不败东方不败东方不败东方不败
东方不败东方不败东方不败东方不败东方不败东方不败
东方不败东方不败东方不败东方不败东方不败东方不败
东方不败东方不败东方不败东方不败东方不败东方不败
东方不败东方不败东方不败东方不败东方不败东方不败
东方不败东方不败东方不败东方不败东方不败东方不败
div>
div>
body>
html>
效果如下:
转 : https://www.cnblogs.com/zuochengsi-9/p/7658339.html