css隐藏滚动条但可以滚动

昨天说到了一个 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
}

记录完毕。

参考:

http://www.3qphp.com/web/css/3042.html

https://www.4spaces.org/css-ie-browser-check/

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注