如何让表格滚动时不触发浏览器回退

背景

小李的老板想要看下最近公司的数据, 机智的小李用了一首歌的时间, 使用 S2 快速的搭建了一个 透视表 将报表链接发给了老板。

第二天, 老板秘书把小李叫进了会议室, 说老板昨天使用报表后暴跳如雷, 让小李赶紧想办法解决一下, 不然只能就地结算一下工资走人了! 小李吓得不轻, 仔细看了下秘书发的视频, 原来是老板使用的是 Mac 电脑, 每次用触摸板横向滚动时总是会触发浏览器的回退, 体验极差。

Kapture 2022-08-08 at 15.12.28.gif

问题出在哪呢?

小李发现如果通过拖拽滚动条, 不会触发浏览器后退, 那么问题应该是出在滚动事件上

Kapture 2022-08-08 at 15.39.11.gif

小李了解到他使用的 S2 透视表, 使用的是虚拟滚动技术, 通过监听容器的 wheel 事件来做的一个按需加载, 本质上还是用到了浏览器的滚动事件, 而滚动条是模拟的, 而非浏览器的滚动条, 只会进行一个位置的同步, 不涉及浏览器的滚动事件, 那么问题应该就是出在 wheel 上, 会不会触发了什么浏览器的默认行为呢?

浏览器滚动默认行为

小李回想他日常遇到的一些浏览器默认行为, 如:

  • <a> 超链接跳转
  • InputElement.focus() 元素聚焦默认滚动到对应位置
  • 子父容器同时**存在滚动条, **子容器在滚动到底/顶部时, 同时触发父容器的滚动

这些行为我们都可以通过 preventDefault() 或是 { preventScroll: true } 来解决

carbon (2).png

看起来 Mac 上滚动触发浏览器回退也是一种浏览器滚动默认行为, 机智的小李一番搜索, 发现了一个叫 overscroll-behavior 的属性, 可以控制浏览器滚动到边界的行为

MDN: We also wanted to get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g. Chrome on Android refreshes the page when you scroll past the top boundary). This can be prevented by setting overscroll-behavior: none on the element

carbon (1).png

果不其然, 在给 html设置 overscroll-behavior: none 后, 老板的手指都磨烂了, 也不会再触发浏览器的回退, 小李长舒了一口气。

Kapture 2022-08-08 at 16.13.26.gif

结语

AntV/S2 是多维交叉分析领域的表格解决方案。如果看完这篇文章你有所收获,欢迎给我们的仓库 Star⭐️ 鼓励。

S2 相关链接:

往期文章

参考链接