如何防止移动Chrome / Safari中的对角滚动

Question

iOS上的Chrome和Safari中是否有一种方法可以限制一次滚动到一个方向？换句话说，如果我开始垂直滚动一个元素，我想关闭用户水平滚动直到垂直滚动完成的功能。反之亦然。

在iOS本机代码中，这称为directionalLockEnabled，在Microsoft浏览器中，其称为-ms-scroll-rails。

在CSS中是否存在可以识别iOS版Chrome（或Safari版iOS，因为它们使用相同的渲染引擎）的CSS这样的东西？

如果没有，是否有可用的javascript解决方案，最好是React兼容的npm包？

Answer 1

不幸的是，如果您只使用纯CSS解决方案，那么规范中就没有内容可一次将滚动锁定到单个轴。

this thread上有很多优点，如果您的用例需要一次将滚动行为锁定到一个轴，则包括一些香草JS解决方案。