Question

我试图在我的网站中放置一个方法，如果用户使用鼠标滚动，而不是上下滚动，则将输入更改为左右滚动。我已经在我的项目中添加了一个名为mousewheel.js的东西，我在标题中引用了jquery，并且我运行了一些我在本网站的线程上找到的代码，但我无法得到它为了工作，任何人都可以指出我的代码有什么问题。

HTML：

  <head>
    <title> Calendar </title>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="screen">
    <link rel="stylesheet" href="css/colorbox.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>

  </head>

<body>

<script>$(document).bind('mousewheel', function(event, delta) {
if($(this).scrollLeft()>=0 && $(this).scrollLeft()<=$('body').width())
var k =  $(this).scrollLeft()-delta*50;
$(this).scrollLeft(k)
});</script>

感谢您的帮助和建议。

Answer 1

您的代码似乎与我看到的mousewheel示例略有不同，请尝试此操作：

$(function() {

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

      this.scrollLeft -= (delta * 30);

      event.preventDefault();

   });

});

来源：https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

Answer 2

如果我正确理解了您的问题并且您对简单的Javascript（没有插件）开放，请查看this answer我发现类似（相同的？）问题。

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

我已使用Internet Explorer 11在jsfiddle中对其进行了测试。

将垂直替换为水平滚动

2 个答案: