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

Question

我有一个非常广泛的网站,故意设计为没有垂直滚动但很多水平.

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

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

这个与MooTools:http://www.tinkainteractive.com.au/和我在http://naldzgraphics.net/inspirations/40-examples-of-horizo​​ntal-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.但那将是你现在的一部分... ;-)