html滚动条代码 好程序员web前端学习路线分享滚动穿透方法

优秀程序员web前端学习路线分享滚动渗透方法。 本文主要介绍Html5滚动穿透的方法。 文章通过示例代码非常详细的介绍了滚动穿透的方法。 对大家的学习或者工作都有一定的参考学习价值。 需要的朋友一起来学习学习吧。

网站需要在移动端进行适配，移动端H5和Web端使用flex布局方案bluma

H5中使用的列表使用react-virtualized绘制表格

为了显示表格中单行数据的具体细节，通常的解决方法是使用新建页面或者弹窗来完成。

这里采用的是弹窗方案，单行数据点击后的数据详情使用bluma的modal-card。

点击单行数据后，弹窗显示详细数据，整个modal-card设置为position: fixed；

没有footer部分html滚动条代码，设置modal-card的高度为整个屏幕的高度：100vh

表现：

1.在chrome浏览器中显示，整个modal-card占满整个屏幕

2. 手机端显示也是满的，但是问题是根据手势移动，浏览器的搜索框部分会被上推。 此时可以滑动弹窗下方的数据列表页，弹窗的标题会覆盖浏览器原有的搜索框部分，但两者之间存在一定的延迟，并且可以清楚地看到下一页的数据

3、在其他手机上会有另一种显示。 如果滑动速度比较快，出现弹窗后立即滑动，会看到弹窗底部有一小块空白，弹窗下方的同一个页面可以滚动，并且有是一个明显的延迟和数据滚动显示。

解决方案：

modal-card自己的解决方案：

JS + CSS 溢出：隐藏

通过JS在弹窗下方的页面html中动态添加css类

if ($modalButtons.length > 0) {
 $modalButtons.forEach(function ($el) {
 $el.addEventListener('click', function () {
 var target = $el.dataset.target;
 openModal(target);
 });
 });
}
 
function openModal(target) {
 var $target = document.getElementById(target);
 rootEl.classList.add('is-clipped');
 $target.classList.add('is-active');
}

使用 overflow:hidden 禁用页面滚动

is-clipped {
 overflow:hidden!important
}

弹窗关闭时，通过JS删除页面的css类：is-clipped

function closeModals() {
 rootEl.classList.remove('is-clipped');
 $modals.forEach(function ($el) {
 $el.classList.remove('is-active');
 });
}

但是这个方案在应用中测试后，发现并不能解决问题，还是出现了上面的问题

位置：固定方案

JS + CSS 位置：fixed + scrollTop

解决思路：

1.弹窗时，设置html的position为fixed，关闭弹窗后，取消html的position属性。

2、因为列表页会滚动，而点击的行可能在滚动发生之后，所以需要计算html页面本身的scrollTop值。

3、弹窗设置position为fixed后html滚动条代码，html页面的scrollTop值会变为0，回到页面顶部，所以关闭弹窗后，需要手动设置的scrollTop值html 页面滚动到 html 页面的原始位置。

4.为了兼容性，需要设置不同属性的scrollTop值

在弹出窗口之前：

const scrollTop = global.document.documentElement.scrollTop || global.pageYOffset || global.document.body.scrollTop;
global.document.documentElement.style.position = 'fixed';
this.scrollTop = scrollTop;

关闭弹窗：

closeModalHandler = () => {
 const { closeOrderHistoryModal } = this.props;
 global.document.documentElement.style.position = '';
 global.pageYOffset = this.scrollTop;
 global.document.documentElement.scrollTop = this.scrollTop;
 global.document.body.scrollTop = this.scrollTop;
 closeOrderHistoryModal();
}

admin普通

收藏 海报 链接