将垂直滚动更改为水平 [英] Changing vertical scroll to horizontal

问题描述

这似乎是在没有足够答案的情况下被问到的.我完全不知道如何执行此操作(包括没有插件).当我主动向下垂直滚动时，我希望网站水平滚动.

This seems to have been asked before without a sufficient answer. I have absolutely no knowledge of how to do this (including no plugins). I want my website to scroll horizontally when I actively scroll down vertically.

我的意思的一些例子: http://hotdot.pro/en/和 http://mashup.ikm.gda.pl/

Some examples of what I mean: http://hotdot.pro/en/ and http://mashup.ikm.gda.pl/

需要明确的是，我并不关心这两个网站都利用的视差效果.我只想水平滚动.

To be clear, I don't care about the parallax effect that both of these websites utilize. I just want to scroll horizontally.

谢谢！

推荐答案

尝试一下:您需要为jquery和鼠标滚轮插件添加脚本引用.然后使用此JS:

Try this: You need to add a script reference to jquery and to the mouse wheel plugin. And then use this JS:

$(function() {
   $("body").mousewheel(function(evt, chg) {
      this.scrollLeft -= (chg * 50); //need a value to speed up the change
      evt.preventDefault();
   });
});

脚本参考:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/js/jquery.mousewheel.js"></script>

您可以直接使用第一个脚本，即jquery脚本，因为它是一个公共存储库，但是第二个，mousewheel.js将要求您将.js文件保存在服务器上的某个位置并提供链接到它(类似于在 src 属性中为图像提供链接的方式).

you can directly use the first one, jquery script, as is because it is a public repository, but the second, the mousewheel.js will require you to save the .js file somewhere on your server and provide a link to it (similar to how you provide links for images in the src attribute).

插件: https://github.com/brandonaaron/jquery-mousewheel

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

这篇关于将垂直滚动更改为水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！