jQuery 鼠标滚轮水平滚动

Posted 2023-04-13

【中文标题】jQuery 鼠标滚轮水平滚动

【英文标题】：jQuery Mousewheel Scroll Horizontally

【发布时间】：2014-07-20 02:08:32

【问题描述】：

我目前正在开发一个横向的网站，可以让我的鼠标滚动到左右滚动...

我的 jQuery 包含序列：

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<!--jquery validation script-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

<!--Smooth Scroll-->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

我的代码如下：

<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>


<script>
$.noConflict();

$(function() 
        $("body").mousewheel(function(event,delta) 
            this.scrollLeft -= (delta * 30);

            event.preventDefault();
        )
    )

$(function() ...);

$(document).ready(function() 

        $('#form').validate(...);

        $("#submit").click(function()
        ...);
    )
</script>

我的“body” CSS 如下：

html 
width:100%;
overflow-y:hidden;
overflow-x: scroll;

body

目前我怀疑的代码是：

<!--Smooth Scroll-->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

我认为鼠标滚动会崩溃。

鼠标滚动正常，唯一的问题是鼠标滚动不流畅，有时停在那里，有时甚至不能移动，不是我的鼠标问题。我不确定是什么原因造成的，因为我已经尝试调试了 2 天。有人在这里分享他们对这个问题的想法吗？

我一直在寻找解决方案，但我的情况看起来很奇怪。滚动到某个部分并在中间卡住。 （只是滚动条。）我在 Mac 上使用 Chrome 进行测试。顺便说一句，滚动时是否有像 AutoShift 这样的解决方案，因为当我按下 Shift 按钮时这对我有用。

【问题讨论】：

看看css-tricks.com/examples/HorzScrolling & css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel

@VedantTerkar 您好 Vedant，我实际上是指您提供给我的第二个链接。我要问的问题是我的滚动流畅度，为什么我的鼠标滚动停止或卡在我的网站中间的某个地方。

出于兴趣，你为什么要加载 3 个 jQuery 实例？

@J.B.我知道不建议这样做，但这会使我的整个网站除了鼠标滚动代码之外都能正常工作，所以我认为我无法弄清楚的东西崩溃了......有什么建议吗？

【参考方案1】：

找了3天的答案，终于找到了一个没有Jquery插件的solution！

// http://www.dte.web.id/2013/02/event-mouse-wheel.html
(function() 
function scrollHorizontally(e) 
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    document.documentElement.scrollLeft -= (delta*40); // Multiplied by 40
    document.body.scrollLeft -= (delta*40); // Multiplied by 40
    e.preventDefault();

if (window.addEventListener) 
    // IE9, Chrome, Safari, Opera
    window.addEventListener("mousewheel", scrollHorizontally, false);
    // Firefox
    window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
 else 
    // IE 6/7/8
    window.attachEvent("onmousewheel", scrollHorizontally);

)();

如果这段代码仍然不能工作，问题不在这里，它在你的 CSS 中。

【讨论】：

您能否发布一个演示，以便我可以看到它正在运行？

@Drewdavid 检查代码注释中的 url .. 它有演示和详细说明。 click here

它对我有用，非常感谢......现在，我想顺利滚动。我之前使用过 butter.js，它在另一个网站上工作，但不是这个。如果有办法在这些代码中集成一个平滑的效果？

【参考方案2】：

这是@TooJuniorToCode 的答案的 JQuery 版本。 如果您已经在使用 jQuery，它会更短更理想。希望它对某人有用。

    $('body').on('mousewheel DOMMouseScroll', function(event)

        var delta = Math.max(-1, Math.min(1, (event.originalEvent.wheelDelta || -event.originalEvent.detail)));

        $(this).scrollLeft( $(this).scrollLeft() - ( delta * 40 ) );
        event.preventDefault();

    );

【讨论】：

我在变量声明之前做了event.preventDefault();的第一件事，它很完美

【参考方案3】：

要水平滚动网站，请按照以下代码：

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

将鼠标滚轮事件附加到正文：

$(function() 

   $("body").mousewheel(function(event, delta) 

      this.scrollLeft -= (delta * 30);

      event.preventDefault();

   );

);

查看演示：

http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

【讨论】：

是的，代码正在运行，感谢您的回答。如果您清楚地查看我的代码，您就会知道我实际上正在使用那些编码脚本。我的问题是......再次......滚动流畅度，我的滚动一直卡住并停止。这是我的问题。

【参考方案4】：

    $("html, body").mousewheel(function(event, delta) 
        this.scrollLeft -= (delta * 30);
        event.preventDefault();
    );

Chrome 在 body 上有滚动，Firefox 在 html 上有滚动

【讨论】：

.mousewheel 不是函数。也许答案不完整。