scroll滚动条插件初始化问题

一种特殊场景下是滚动条容器先隐藏，点击某个东西后显示出来。然后实例化滚动条。实例

js:

        var flag = true;
        document.getElementById('btn1').onclick = function(){
            document.querySelector('.wrap').style.display = 'block';
            if(flag){
                flag = false;
                new IScroll('.wrap',{scrollbars:true,shrinkScrollbars:'scale'});  //最好添加shrinkScrollbars属性。通过例子可以感觉出性能的提升
            }
        }
        document.querySelector('.close').addEventListener('click',function(){
            document.querySelector('.wrap').style.display = 'none';
        },false)

 

 css:

        #btn1{
            padding:2px 4px;
            font-size: 16px;
            position: absolute;
            top:50%;
            left:50%;
            -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }
        .wrap{
            position: relative;
            overflow: hidden;
            height:700px;  /*首先在使用插件的时候这个高度不能是百分比*/
            display: none;
        }
        .close{
            padding:5px 8px;
            border:2px solid #222;
            border-radius: 20px;
            position: absolute;
            top:50%;
            left:50%;
            cursor: pointer;
            -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            background-color: transparent;
        }

 

html:

    <button id="btn1">点击显示</button>
    <div class="wrap">
        <ul>
            <li style="height:500px;background-color: #ccc;"></li>
            <li style="height:500px;background-color: #f00;"></li>
            <li style="height:500px;background-color: #ccc;"></li>
            <li style="height:500px;background-color: #ff0;"></li>
            <li style="height:500px;background-color: #ccc;"></li>
            <li style="height:500px;background-color: #00f;"></li>
            <li style="height:500px;background-color: #ccc;"></li>
            <li style="height:500px;background-color: #0f0;"></li>
            <li style="height:500px;background-color: #ccc;"></li>
        </ul>
        <button class="close">点击关闭</button>
    </div>