介绍
本篇文章为大家展示了怎么在Html5中实现滚动穿透,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
<强>问题详情:
在点击单行数据后,弹窗显示详情数据,整个modal-card设置成位置:固定;
没有页脚部分,设置modal-card的高度为整个屏幕的高度:100 vh
表现:
<李> 在chrome浏览器中显示,整个modal-card占满整个屏幕
<李> 在手机端显示也是占满,但是问题是,根据手势移动,会将浏览器的搜索框部分往上顶,此时弹窗下面的数据列表页能够进行滑动,之后弹窗的标题覆盖浏览器原搜索框部分,但这之间有延迟,能清晰看到下面页面的数据
<李> 在其他手机上会有另外一种显示,如果滑动速度比较快,弹窗出现后立即滑动,就会看到在弹窗的底部就会出现一个小的空白,同样弹窗下面的页面能够滚动,并且有明显延迟和数据滚动显示。
解决方案:
, <强> modal-card自身解决方案:
JS + CSS溢出:隐藏
通过JS动态给弹窗下面的页面html添加CSS类
if (modalButtons.length 美元;祝辞,0),{
,,,modalButtons.forEach美元(function (el)美元,{
,,,,,,,el.addEventListener美元(& # 39;点击# 39;,,function (), {
,,,,,,,var target =, el.dataset.target美元;
,,,,,,,openModal(目标);
,,,,,,,});
,,,});
}
function openModal(目标),{
,,,var target 美元;=,. getelementbyid(目标);
,,,rootEl.classList.add (& # 39; is-clipped& # 39;);
,,,美元target.classList.add (& # 39; is-active& # 39;);
} <强> 
is-clipped {
,,溢出:隐藏!重要
}
当弹窗关闭时,通过JS删除掉页面的css类:夹
<人物> function closeModals (), {
,,,rootEl.classList.remove (& # 39; is-clipped& # 39;);
,,,modals.forEach美元(function (el)美元,{
,,,,,,,美元el.classList.remove (& # 39; is-active& # 39;);
,,,});
} 
但是这种方案在应用中测试过后,发现并不能解决问题,上面的问题还是出现
<强>位置:固定方案
JS + CSS位置:固定+ scrollTop
方案思路:
<李> 弹窗时,将html的位置设置为固定的,将弹窗关闭后,将html的人事部经理属性取消。
<李> 因为列表页会出现滚动的情况,而点击的行有可能是在滚动发生后,所以需要计算html页面本身的scrollTop值。
<李> 因为弹窗时设置位置为固定后,html页面的scrollTop值会变成0,会回到页面顶部,所以在关闭弹窗后,需要手动设置html页面的scrollTop值,让其滚动到html页面原来的位置。
<李> 对于兼容性,需要设置不同属性的scrollTop值
弹窗之前:
const scrollTop =, global.document.documentElement.scrollTop | |, global.pageYOffset | |, global.document.body.scrollTop;
时间=global.document.documentElement.style.position & # 39;固定# 39;;
this.scrollTop =, scrollTop; 
关闭弹窗:
<人物> closeModalHandler =,(),=祝辞,{
,,,const {, closeOrderHistoryModal },=, this.props;
,,,global.document.documentElement.style.position =, & # 39; & # 39;;
,,,global.pageYOffset =, this.scrollTop;
,,,global.document.documentElement.scrollTop =, this.scrollTop;
,,,global.document.body.scrollTop =, this.scrollTop;
,,,closeOrderHistoryModal ();
} 
上述内容就是怎么在Html5中实现滚动穿透,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。
