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脚本做大量的事件处理工作，但正如我所说，我会重新考虑布局。

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

2 个答案: