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

Question

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

Answer 1

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

编辑：这个问题可以通过 jQuery 解决，但需要你用 CSS "overflow-y: hidden" 隐藏竖线。您需要下载 jQuery.js 和 jQuery-mousewhee.min.js 并将它们包含在您的 html 中。

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

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

然后在你的 body 的 CSS 中包含（或任何你想要水平滚动的 div）

overflow-y: hidden;

最后，添加自定义脚本

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

完成。

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