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

Question

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

水平滚动通常会给用户带来烦恼，因此想知道是否有一些方法可以使用中间鼠标或其他滚动习惯（例如页面向上/向下，上/下箭头，中间鼠标单击/拖动）来水平滚动而不是垂直滚动。

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

这个使用MooTools：http://www.tinkainteractive.com.au/和其他一些例子我在http://naldzgraphics.net/inspirations/40-examples-of-horizontal-scrolling-websites/发现。

- Peter Craig

---

我有一个客户也坚持限制垂直滚动。我不明白，因为在鼠标上的滚动按钮使垂直滚动变得容易。我还看到网页上越来越多的滚动条（例如SO、thesixtyone.com等），我很喜欢。那么，你为什么要限制垂直滚动呢？ - Upperstage

这个答案似乎更好：https://dev59.com/YHE95IYBdhLWcg3wWMlQ#8785695 - tatsu

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中无法运行。但这就是你现在需要做的部分...;-)

- Leo

---

呃，检查用户代理以添加JS增强功能 :/ - Greg

Answer 2

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

尽管如此，您仍然可以使用JavaScript进行大量事件处理，但正如所说，我会重新考虑布局。

- manuel aldana

---

我不同意。水平网站具有非常独特的风格。我认为使用滚轮来适当地从左向右滚动页面不会对用户造成混淆，甚至根本不会。 - Doug Neiner

任何一个问“你为什么想这么做？”的答案都应该被踩。可能是你的项目经理告诉你必须这样做，或者客户要求这样。不能说“你为什么想这么做？”然后失去客户。 - reven