实现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);
        }

 

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

你可能感兴趣的:(javascript)