反应原生 web scrollView 水平滚动鼠标

Question

使用 react-native-web，我有一个滚动视图，其内容比屏幕宽得多。 使用“水平”，我可以按预期沿 x 轴滚动，但只能使用笔记本电脑的触摸板。 鼠标滚轮滚动不会做任何事情，因为滚轮仅垂直滚动而不是水平滚动。 我一直在寻找一段时间，但找不到使用鼠标滚轮进行水平滚动的任何方法。 对此的任何帮助将不胜感激！

Answer 1

默认情况下，用户需要按住Shift + Scrolling Mouse Wheel才能水平滚动。

编辑：此问题可以通过 jQuery 解决，但需要您使用 CSS“溢出-y：隐藏”隐藏竖线。 您需要下载jQuery.js和jQuery- mousewhee.min.js 并将它们包含在您的 html 中。

下载文件后，在代码中包含以下脚本。

<script scr="jquery-3.6.0.min.js"></script>
<script scr="jquery-mousewhee.min.js"></script>

然后包括在你身体的 CSS （或任何你想水平滚动的 div）

overflow-y: hidden;

最后，添加自定义脚本

<script>
    $(document).ready(function() {
        $('html, body, *').mousewheel(function(e, delta) {
            this.scrollLeft -= (delta * 30);
            e.preventDefault();
        });
    });
</script>

完成。

注意：如果您想将竖线包含在后面，则需要弄乱代码。

Answer 2

这是使用鼠标滚轮进行水平滚动的指南（使用 ts、hook）

检查这个回购

https://github.com/bhyoo99/Horizontal-scroll-react-native-web