移动端滚动穿透,html事件穿透
问题背景：
网站需要在移动端进行适配，移动端H5和web端采用bluma这种flex布局解决方案。
H5使用的list使用react-virtualized来绘制表格。
为了显示表中单行数据的详细信息，通常的解决方案是使用新页面或弹出窗口。
这里采用的是弹出窗口的方案，bluma的modal-card用于点击单行数据后的数据详情。
详情和例子，请参考https://bulma.io/documentation/components/modal/.
问题详情：
点击单行数据后，弹出窗口显示详细数据，整个modal-card设置为位置：固定；
如果没有页脚部分，将modal-card的高度设置为整个屏幕的高度：100vh。
性能：
当在chrome浏览器中显示时，整个modal-card是满的。手机上也是满屏，但问题是浏览器的搜索框部分会根据手势移动向上推。这时可以滑动弹窗下的数据列表页面，然后弹窗的标题覆盖浏览器原有的搜索框部分，但是两者之间有延迟。你可以清楚的看到，下面一页的数据在其他手机上会以另一种方式显示。如果滑动速度比较快，在弹出窗口出现后立即滑动，会看到弹出窗口底部有一个小的空白处。同样，弹出窗口下方的页面可以滚动，有明显的延迟和数据滚动显示。解决方案：
modal-card 自身解决方案：
JS CSS溢出：隐藏
JS动态地将css类添加到弹出窗口下面的页面html中。
if($ modal buttons . length 0){ $ modal buttons . foreach(function($ El){ $ El . addevent listener( click ，function(){ var target=$ El . dataset . target；openModal(目标)；});});} function open modal(target){ var $ target=document . getelementbyid(target)；rootel . class list . add( is-clipped )；$ target . class list . add( is-active )；}
通过 overflow:hidden 来禁止页面的滚动
is-clipped {溢出：隐藏！重要}关闭弹出窗口时，通过JS: is-clipped删除页面的css类。
函数closeModals(){ rootel . class list . remove( is-clipped )；$ modals . foreach(function($ El){ $ El . class list . remove( is-active )；});}
但在应用中测试后发现，这种方案并不能解决问题，上述问题依然出现。
position:fixed 方案
JS CSS位置：固定滚动条
方案创意：
弹出窗口时，将html的位置设置为固定，弹出窗口关闭后，取消html的position属性。因为列表页面会滚动，点击的行可能是滚动后的，所以需要计算html页面本身的scrollTop值。因为当弹出窗口设置为fixed时，html页面的scrollTop值会变成0，返回页面顶部。因此，关闭弹出窗口后，需要手动设置html页面的scrollTop值，以滚动到html页面的原始位置。为了兼容，需要在弹出窗口之前设置不同属性的scrollTop值：
const scroll top=global . document . document element . scroll top global . page yo offset global . document . body . scroll top；global . document . document element . style . position= fixed ；this . scroll top=scroll top；
关闭弹出窗口：
closeModalHandler=()={ const { closeordershistorymodal }=this . props；global . document . document element . style . position=“”；global . page yoffset=this . scroll top；global . document . document element . scroll top=this . scroll top；global . document . body . scroll top=this . scroll top；closeordershistorymodal()；}
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。