jQuery鼠标滚轮水平滚动

Question

jQuery鼠标滚轮水平滚动

13

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

我的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>

我认为这个问题是和鼠标滚轮冲突了。

鼠标滚轮能够工作，唯一的问题是它不够流畅，有时候会停在某个位置，有时候甚至无法移动，这不是我的鼠标的问题。我不确定这是什么原因，因为我已经尝试调试了两天了。有没有人能分享一下对这个问题的想法？

我一直在寻找解决方案，但在我的情况下看起来很奇怪。滚动到某个部分，然后停在中间。（只是滚动条。）我正在使用Mac上的Chrome进行测试。另外是否有像AutoShift这样的解决方案，因为当我按下Shift键时它是有效的。

- TooJuniorToCode

请查看http://css-tricks.com/examples/HorzScrolling/和http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/。 - Vedant Terkar

@VedantTerkar 你好，Vedant，我实际上是在参考你提供给我的第二个链接。我问的问题是关于我的滚动平滑度，为什么我的鼠标滚轮会在网页中间停止或卡住。 - TooJuniorToCode

你好，出于好奇，为什么要加载3个jQuery实例？ - yellow-saint

@J.B. 我知道这不是推荐的做法，但这使得我的整个网站都能正常工作，除了鼠标滚动代码之外。所以我认为它可能与某些东西冲突，我无法弄清楚... 有什么建议吗？ - TooJuniorToCode

6个回答

14

这是 @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();

    });

- Erick A. Montañez

我在变量声明之前加入了event.preventDefault();，这样就完美了。 - iKev61

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/

- Systematix Infotech

1

是的，代码能够正常工作，感谢您的答案。如果你仔细看我的代码，你就会知道我实际上正在使用那些编码脚本。我的问题是...再次出现了...滚动平稳性的问题，我的滚动始终卡住并停止。这是我的问题。 - TooJuniorToCode

3

2022 年更新来自 @Erick A. Montañez 的答案: "mousewheel" 和 'DOMMouseScroll' 事件已经被弃用，应该使用新的统一标准 "wheel" 事件。

示例：

const scrollContainer = document.querySelector("main");

scrollContainer.addEventListener("wheel", (evt) => {
  evt.preventDefault();
  scrollContainer.scrollLeft += evt.deltaY;
});

来源：使用原生JavaScript实现鼠标滚轮水平滚动

- jklaze

0

window.scrollBy() 是用于逐步滚动的函数

window.addEventListener("wheel", (evt) => {
    evt.preventDefault();
    window.scrollBy(evt.deltaY, 0);
});

- dukevin

-1

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

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

- Stanescu Gheorghe

.mousewheel 不是一个函数。也许答案不完整。 - Cos

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TooJuniorToCode · Accepted Answer

经过三天的寻找答案，我终于找到了一个没有使用jQuery插件的解决方案！

// 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中。