实现layer弹出iframe层隐藏滚动条，改变滚动条样式

最新推荐文章于 2023-03-20 20:55:01 发布

weixin_30273763

最新推荐文章于 2023-03-20 20:55:01 发布

阅读量1.7k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhengyuanyuan/p/8397846.html

版权

项目单独使用的是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);
        }

转载于:https://www.cnblogs.com/zhengyuanyuan/p/8397846.html