用鼠标反应本机 web scrollView 水平滚动

Question

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

Answer 1

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

编辑：这个问题可以通过jQuery解决，但需要你用CSS隐藏竖线“overflow-y：隐藏”。您需要下载 jQuery.js and 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 水平滚动

React native web scrollView horizontal scroll with mouse

javascript

react-native

react-native-web