Layui弹窗需完整展示长篇免责声明并支持滚动:用type:1时,content内联样式设max-height+overflow-y:auto,弹窗area设固定高度,success中再强制设置.layui-layer-content样式;推荐type:2加载独立HTML页,URL后加'no'参数,并在页面内设max-height和-webkit-overflow-scrolling:touch;移动端须在success中启用touch滚动、禁用body touchmove,并在关闭时移除监听。

需要在Layui弹窗中完整展示长篇免责声明协议,且用户能上下滚动阅读全部内容,不能只显示顶部几行就截断。
用type:1配合内联样式包裹内容
第一步:把协议文本用
第二步:设置弹窗area高度为固定值,比如['500px', '400px'],避免内容区塌陷导致滚动失效。
第三步:在success回调中再补一层保险——定位到.layui-layer-content,强制设max-height和overflow-y:auto,防止全局CSS覆盖。
这一步操作起来很简单,直接把文件拖进去就行。但【必须用max-height而非height】,否则内容少时会留大片空白,内容多时又会被硬性截断。
用type:2加载独立HTML页面(推荐)
方法一:把协议内容单独存为agreement.html,调用时写content: ['agreement.html', 'no']。
方法二:在agreement.html的
注意:'no'必须作为数组第二项传入,只写字符串url会残留不可交互的空滚动条——它不响应滚轮、拖不动,但就是赖着不走。
移动端防卡顿与滚动穿透处理
在success回调里执行以下三件事:
① 给.layui-layer-content加-webkit-overflow-scrolling: touch;
② 给document.body加touchmove事件监听,并调用e.preventDefault();
③ 【务必在end或cancel回调中移除该监听】,否则整个页面再也滑不了。
这三步缺一不可,iOS Safari和部分安卓WebView中,仅设overflow-y:auto会导致滚动迟滞甚至完全无法拖动。


















