layui.flow流式响应滚动翻页

网上很多教程，浏览器滚动条是可以，但是指定 scrollElem 就不行了，后来发现，是个“回”字布局，最外面的一层，固定高度或响应剩余高度满屏。里面一层，正常文档流就行了。

这东西既然这么好用，我就测试好了，做个笔记。

样式表部分，本例用的是，自适应占满剩余高度

body,html{
	height: 100%;
	margin: 0;
}
#loadwrap{
	height: 100%;
}
.container {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.container > div:last-child {
	position: relative;
	background-color: tomato;
	flex: 1;
	overflow-y: auto;
	/*clear: both;*/
}

html代码部分

<div class="container">
<div>布局一</div>
<div class="layui-row" id="scrollBox" style="margin-bottom: 50px;">
	<div class="flow-default" id="layflow"><!--流式区--></div>
</div>
</div>

js脚本部分

layui.use('flow', function()
{
	var flow = layui.flow;
	$('#layflow').unbind();
	$('#layflow').remove();
	$('#scrollBox').append('<div class="flow-default" id="layflow"></div>');
	var flowlist=flow.load(
	{
		elem: '#layflow' //流加载容器，回字型内圈
		,scrollElem: '#scrollBox' //滚动条所在容器，回字型外圈
		,isAuto: true //为true时滚动翻页
		,isLazyimg: true //图片懒加载
		,mb:10 //滚动到底部的触发下一页距离,默认50
		,end:'<div style="display:block;">no more</div>' //没有更多了
		,done: function(page, next)
		{
			//执行下一页的回调
			$.ajax(
				{
					url:"getdata.php",
					type:'post',
					dataType:'text',
					async:false,
					data:
					{
						page:page //页码
						,pagesize:8 //每页量
					},
					beforeSend:function ()
					{
					},
					success:function(json)
					{
						var lis = [];
						if(json.RecordCount>0)
						{
							var obj=json.datalist;
							if (obj.length > 0)
							{
								$.each(obj, function (index, item)
									{
										var html='<div>...你的内容...'+item.mycontent+'</div>';
										lis.push(html);
									});
									
							}
						}else
						{
							//无数据
						}
						next(lis.join(''), page < json.pages);
					},
					complete: function ()
					{

					},
				});

			//以上是网络数据插入

		} //done end
	}); //flow end
});

通俗易懂。