使用鼠标滚轮水平滚动浏览器窗口

问题描述：

我有一个非常宽的网站，故意设计为没有垂直滚动但很多水平。

I have a very wide website, intentionally designed to have no vertical scrolling but a lot of horizontal.

水平滚动通常是一个痛苦的用户所以想知道是否有一些方法可以使用中间鼠标或其他滚动习惯（例如，向上/向下翻页，向上/向下箭头，鼠标中键/拖动）水平滚动而不是垂直滚动。

Scrolling horizontally is usually a pain to users so was wondering if there was some way of using the middle mouse or other scrolling habits (eg. page up/down, up/down arrows, middle mouse click/drag) to scroll horizontally instead of vertically.

编辑：要求水平滚动的主要原因是布局/方法是从左到右的图形/交互时间轴。我已经找到了一些例子;

The main reason for requiring horizontal scrolling is because the layout/approach is a left to right graphical/interactive timeline. I've since found some examples;

这个与MooTools： http://www.tinkainteractive.com.au/ 以及我在 http://naldzgraphics.net/inspirations/40-examples-of-horizontal-scrolling-websites/

This one with MooTools: http://www.tinkainteractive.com.au/ and a few other examples I found at http://naldzgraphics.net/inspirations/40-examples-of-horizontal-scrolling-websites/

答

您可以添加自己的事件监听器

You can add your own event listener

document.onmousewheel = myScrollFunction

滚动可以通过

window.scrollBy(x, y)

其中x是水平滚动offset和y垂直滚动偏移量。

Where x is the horizontal scrolling offset and y the vertical scrolling offset.

所以你可以在事件监听器中调用这个函数。您可能必须使用event.stopPropagation停止冒泡并使用event.preventDefault阻止浏览器默认行为，以便不再应用原始滚动行为。

So you might just call this function in your event listener. You may have to stop bubbling with event.stopPropagation and prevent browser default behaviour with event.preventDefault so that the original scrolling behaviour doesn't get applied anymore.

编辑：我对此感到好奇所以我实现了一些东西： - ）

I was curious about this so I implemented something :-)

function onScroll(event) {
  // delta is +120 when scrolling up, -120 when scrolling down
  var delta = event.detail ? event.detail * (-120) : event.wheelDelta
  // set own scrolling offset, take inverted sign from delta (scroll down should scroll right,
  // not left and vice versa
  var scrollOffset = 10 * (delta / -120);
  // Scroll it
  window.scrollBy(scrollOffset, 0);
  // Not sure if the following two are necessary, you may have to evaluate this
  event.preventDefault;
  event.stopPropagation;
}

// The not so funny part... fin the right event for every browser
var mousewheelevt=(/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
if (document.attachEvent) 
  document.attachEvent("on"+mousewheelevt, onScroll);  
else if (document.addEventListener)
  document.addEventListener(mousewheelevt, onScroll, false);

这适用于Firefox 3.5和Opera 10，但不适用于IE8。但那将是你现在的部分...; - ）

This works in Firefox 3.5 and Opera 10, however not in IE8. But that would be your part now... ;-)

使用鼠标滚轮水平滚动浏览器窗口

相关推荐