宜宾网站建设公司

好程序员web前端学习路线分享滚动穿透方法-创新互联

好程序员web前端学习路线分享滚动穿透方法，这篇文章主要介绍Html5滚动穿透的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着一起学习学习吧。

创新互联始终坚持【策划先行，效果至上】的经营理念，通过多达十余年累计超上千家客户的网站建设总结了一套系统有效的网络营销推广解决方案，现已广泛运用于各行各业的客户，其中包括：成都发电机租赁等企业，备受客户夸奖。

网站需要在移动端完成适配,针对移动端H5以及web端采用的都是bluma这种flex布局解决方案

在H5中使用的列表采用的是react-virtualized 来绘制表格

为了展示表格中单行数据的具体详情，通常的解决方案是采用新页面或者是弹窗来完成。

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

在点击单行数据后，弹窗显示详情数据，整个modal-card设置成position:fixed;

没有footer部分，设置modal-card的高度为整个屏幕的高度：100vh

表现：

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

2、在手机端显示也是占满，但是问题是，根据手势移动，会将浏览器的搜索框部分往上顶，此时弹窗下面的数据列表页能够进行滑动，之后弹窗的标题覆盖浏览器原搜索框部分，但这之间有延迟，能清晰看到下面页面的数据

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

解决方案：

modal-card 自身解决方案：

JS + CSS overflow:hidden

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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 来禁止页面的滚动

1

2

3

is-clipped {

overflow:hidden!important

}

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

1

2

3

4

5

6

function closeModals() {

rootEl.classList.remove('is-clipped');

$modals.forEach(function ($el) {

$el.classList.remove('is-active');

});

}

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

position:fixed 方案

JS + CSS Position:fixed + scrollTop

方案思路：

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

2. 因为列表页会出现滚动的情况，而点击的行有可能是在滚动发生后，所以需要计算html页面本身的scrollTop 值。

3. 因为弹窗时设置position为fixed后，html页面的 scrollTop 值会变成0，会回到页面顶部，所以在关闭弹窗后，需要手动设置html页面的scrollTop 值，让其滚动到html页面原来的位置。

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

弹窗之前：

1

2

3

const scrollTop = global.document.documentElement.scrollTop || global.pageYOffset || global.document.body.scrollTop;

global.document.documentElement.style.position = 'fixed';

this.scrollTop = scrollTop;

关闭弹窗：

1

2

3

4

5

6

7

8

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();

}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


分享标题：好程序员web前端学习路线分享滚动穿透方法-创新互联
URL标题：http://ybzwz.com/article/dgeipi.html

其他资讯