javascript - 强制垂直滚动用户操作显示为水平滚动

Question

我正在开发一个投资组合网站，该网站设计为在用户垂直滚动时水平滚动。此 CSS ( https://css-tricks.com/examples/HorzScrolling/) 对我不起作用。我只能找到创建水平滚动条的答案或 fiddle ，这不是我要找的。

我的 CSS 规则如下所示:

 .container-scroll {
     width: auto;
     min-width: 100px;
     overflow-x: auto;
     position: relative;
     min-height: 100%;
 }

我想模拟这个网站的水平滚动功能:http://yearinreview.hshtags.com/

Answer 1

很久以前制作的，它将鼠标滚动转换为水平滚动，包括动态滚动并适用于大多数浏览器..

只需在底部添加你想要的滚动元素即可:

var hs = new HorizontalScroll(document.body);

代替 document.body

研究它，从中学习；)

Codepin

再解释一下:

根据当前使用的浏览器，有许多不同的鼠标滚动事件:

鼠标滚轮( Chrome )

轮子 (IE)

DOMMouseScroll (火狐)

因此，为了检测哪个元素存在，对有问题的元素进行附件检查，然后附加滚动事件或 scrollEv 的函数，我们将此元素称为 elq:

var elq = document.getElementById('elementinquestion');
switch('object')
        {
            case typeof  elq.onmousewheel:
                elq.onmousewheel = scrollEv;
            break;
            case typeof  elq.onwheel:
                elq.onwheel = scrollEv;
            break;
            case typeof  elq.onDOMMouseScroll:
                elq.onDOMMouseScroll = scrollEv;
            break;
            case typeof  elq.DOMMouseScroll:
                elq.DOMMouseScroll = scrollEv;
            break;
        }

一旦我们附加到正确的鼠标滚轮事件，我们就可以通过读取传递给函数的事件对象来启动我们的逻辑:

var scrollEv = function(eventObject)
{
   eventObject.preventDefault(); //prevent default scrolling action
}

我们正在寻找的事件对象中的属性也将取决于浏览器，而且 firefox 和 chrome/IE/Safari 之间的值也会不同。

eventObject.wheelDelta (IE/chrome/Safari)

eventObject.deltaY (Firefox)

eventObject.detail(旧 IE)

要平衡所有这些，使它们围绕相似的值使滚动流畅需要一些数学知识。对于 wheelDelta，我们需要除以 60，因为这个值会很高，对于 deltaY 这个值将在相反的频谱上..所以必须乘以 -1 对其进行取反，细节只需要取反并除以 2，例如:

var delta = 0;
  if (eventObject == null)
  {
    eventObject = window.event;
  }
  if (typeof eventObject.wheelDelta != 'undefined')
  {
    if(eventObject.wheelDelta < -50)
    {
      eventObject.wheelDelta = -30;
    }
    else if(eventObject.wheelDelta > 50)
    {
      eventObject.wheelDelta = 30;
    }
    delta = eventObject.wheelDelta/60;
  }
  else if(typeof eventObject.deltaY != 'undefined')
  {
    if(eventObject.deltaY < -50)
    {
      eventObject.deltaY = -30;
    }
    else if(eventObject.deltaY > 50)
    {
      eventObject.deltaY = 30;
    }
    delta = eventObject.deltaY*(-1);
  }
  else if (typeof eventObject.detail != 'undefined')
  {
    delta = -eventObject.detail/2;
  }

现在我们可以使用这个值来设置我们的滚动。我们的滚动来自元素中的 2 个不同属性，也基于浏览器:

elq.scrollLeft

elq.offsetLeft

要移动有问题的元素，我们只需将 delta 的结束值添加到 scrollLeft 中即可:

if(typeof elq.scrollLeft != 'undefined')
{
  elq.scrollLeft += delta;
}
else if(elq.offsetLeft)
{
  elq.scrollLeft += delta;
}

就是这样，一个跨浏览器滚动系统，将默认值覆盖为水平:)