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

Question

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

水平滚动通常对用户来说是一种痛苦，所以想知道是否有某种方法可以使用鼠标中键或其他滚动习惯(例如，向上/向下翻页、向上/向下箭头、鼠标中键单击/拖动)来水平滚动而不是垂直。

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

这个带有 MooTools:http://www.tinkainteractive.com.au/以及我在 http://naldzgraphics.net/inspirations/40-examples-of-horizontal-scrolling-websites/ 找到的其他一些示例

Answer 1

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

document.onmousewheel = myScrollFunction

滚动可以通过

window.scrollBy(x, y)

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

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

---

编辑:我对此很好奇，所以我实现了一些东西:-)

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。但现在那将是你的部分......;-)