昨天说到了一个 layui.flow流式响应滚动翻页
发现有一个滚动条,这不是十分丑的事情嘛。修改变动如下:
适配 chrom safari firefox ie opera浏览器
昨天的例子:
<div class="container">
<div>布局一</div>
<div class="layui-row" id="scrollBox" style="margin-bottom: 50px;">
<div class="flow-default" id="layflow"><!--流式区--></div>
</div>
</div>
样式调整
body,html{
height: 100%;
margin: 0;
}
#loadwrap{
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
/* for firefox */
overflow: hidden;
}
.container > div:last-child {
position: relative;
background-color: tomato;
flex: 1;
overflow-x: hidden;
overflow-y: scorll;
/* ie 11+ */
-ms-overflow-style: none;
/*clear: both;*/
}
/* firefox */
@-moz-document url-prefix() {
.container > div:last-child {
/* old firefox */
/* overflow: -moz-scrollbars-none; */
padding-right: 17px;
}
}
/* chrome or safari */
.container > div:last-child::-webkit-scrollbar {
width: 0 !important
}
记录完毕。
参考: