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>

完成。

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

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

1 个答案: