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

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

Answer 2

我不会改变这种行为。这对用户来说是非常出乎意料的。也许掩盖症状并重新布局您的网站以切换到更垂直居中的方法是有意义的？

您仍然可以使用 java-script 进行大量事件处理，但如前所述，我会重新考虑布局。