实现layer弹出iframe层隐藏滚动条，改变滚动条样式
项目单独使用的是layui的layer，要求弹出一个滚动框浏览界面，使用弹出iframe层。
但是原样式的滚动条实在是很难看，不符合界面要求，所以百度加自己结合写了一个。
一般来说，使用了layer.open中的scrollbar，设置为false的话，的确是没有滚动条了，但是页面也不能下拉了。
目的是为了改变滚动条样式，我使用的是隐藏了iframe层的滚动条，再内置一个滚动框，必须保证宽度一致
html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/layer.js" ></script> <script> var Test2 = { init:function(){//入口 this.initNode(); this.bindEvent(); }, initNode:function(){//初始化节点 this.$test1 = $('#test1'); }, bindEvent:function(){//绑定事件 this.$test1.on('click',this.bigEvent); }, tabEvent:function(){ layer.tab({ area: ['200px', '300px'], tab: [{ title: 'TAB1', content: $('#table').html() }, { title: 'TAB2', content: '内容2' }] }) }, bigEvent:function(){ layer.open({ type: 2, title: false, resize:true,//禁止拖拉框的大小 area:['213px','400px'], offset:['250px','100px'], closeBtn: 0, shadeClose: true, // skin: ['demo-class','inner'], // scrollbar:false,//关闭滚动条 content: ['http://127.0.0.1:8020/Layer/data.html?__hbt=1517449124311','no'] // content: 'http://127.0.0.1:8020/Layer/data.html?__hbt=1517449124311' }) } }; $(function() { Test2.init(); }); </script> <body style="width: 1000px;height: 800px;"> <a id="test1" class="layui-btn layui-btn-primary" href="javascript:;">弹出</a> </body> </html>
引入界面html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/scroll.css" /> </style> </head> <body> <div class="inner innerbox"> <p> <span class="float_left span4">8750元/吨</span><br /> <span class="float_left span4">100吨</span><span>线下</span><br /> <span class="float_left span5">成交</span> <button style="float: right;background-color: red;margin: 0px;">成交</button> </p> <p> <span class="float_left span4">8750元/吨</span><br /> <span class="float_left span4">100吨</span><span>线下</span><br /> <span class="float_left span5">成交</span> <button style="float: right;background-color: red;margin: 0px;">成交</button> </p> <p> <span class="float_left span4">8750元/吨</span><br /> <span class="float_left span4">100吨</span><span>线下</span><br /> <span class="float_left span5">成交</span> <button style="float: right;background-color: red;margin: 0px;">成交</button> </p> <p> <span class="float_left span4">8750元/吨</span><br /> <span class="float_left span4">100吨</span><span>线下</span><br /> <span class="float_left span5">成交</span> <button style="float: right;background-color: red;margin: 0px;">成交</button> </p> <p> <span class="float_left span4">8750元/吨</span><br /> <span class="float_left span4">100吨</span><span>线下</span><br /> <span class="float_left span5">成交</span> <button style="float: right;background-color: red;margin: 0px;">成交</button> </p> <p> <span class="float_left span4">8750元/吨</span><br /> <span class="float_left span4">100吨</span><span>线下</span><br /> <span class="float_left span5">成交</span> <button style="float: right;background-color: red;margin: 0px;">成交</button> </p> <p> <span class="float_left span4">8750元/吨</span><br /> <span class="float_left span4">100吨</span><span>线下</span><br /> <span class="float_left span5">成交</span> <button style="float: right;background-color: red;margin: 0px;">成交</button> </p> <p> <span class="float_left span4">8750元/吨</span><br /> <span class="float_left span4">100吨</span><span>线下</span><br /> <span class="float_left span5">成交</span> <button style="float: right;background-color: red;margin: 0px;">成交</button> </p> <p> <span class="float_left span4">8750元/吨</span><br /> <span class="float_left span4">100吨</span><span>线下</span><br /> <span class="float_left span5">成交</span> <button style="float: right;background-color: red;margin: 0px;">成交</button> </p> <p> <span class="float_left span4">8750元/吨</span><br /> <span class="float_left span4">100吨</span><span>线下</span><br /> <span class="float_left span5">成交</span> <button style="float: right;background-color: red;margin: 0px;">成交</button> </p> <p> <span class="float_left span4">8750元/吨</span><br /> <span class="float_left span4">100吨</span><span>线下</span><br /> <span class="float_left span5">成交</span> <button style="float: right;background-color: red;margin: 0px;">成交</button> </p> </div> </body> </html>
CSS：
.inner{
width: 200px;
height: 400px;
position: absolute;
top: 33px;
left: 13px;
/*cursor: pointer;*/
overflow:hidden;
}
.innerbox{
overflow-x: hidden;
overflow-y: auto;
color: #000;
font-size: .7rem;
font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑体",Arial,Tahoma;
height: 100%;
}
/*滚动条样式*/
.innerbox::-webkit-scrollbar {/*滚动条整体样式*/
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
height: 4px;
}
.innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
.innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
