jQuery鼠标滚轮水平滚动

Question

我目前正在开发一个水平网站，可以让我的鼠标滚动到左右滚动……

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

我的“身体”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 按钮时这对我有用。

原文由 TooJuniorToCode 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

经过 3 天的寻找答案，我终于找到了一个没有 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 中。

原文由 TooJuniorToCode 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 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();

    });

原文由 Erick A. Montañez 发布，翻译遵循 CC BY-SA 4.0 许可协议