隐藏滚动条但保留滚动效果

html:

<div class="outer-container">
 <div class="inner-container">
    <div class="content">
        1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br>
    </div>
 </div>
</div>

css:

<style>
    .outer-container {
        width: 200px;
        height: 200px;
    }
    .outer-container {
        position: relative;
        overflow: hidden;
    }
    .inner-container {
        position: absolute;
        top:0;
        left: 0;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .content{
        width:200px;
        height:200px;
    }

    /* for Chrome */
    .inner-container::-webkit-scrollbar {
        display: none;
    }
</style>

亲测谷歌、火狐、IE浏览器均无滚动条，但是刚切换到移动模式会有滚动条，滚动两次滚动条消失就不会再出现滚动条了，具体问题暂未找到，但是在移动端设备上是没有滚动条的~
demo实例下载