强制垂直滚动用户操作显示为水平滚动答案

【问题标题】：Force Vertical Scroll User Action to Manifest as Horizontal Scroll强制垂直滚动用户操作显示为水平滚动
【发布时间】：2015-07-02 21:16:45
【问题描述】：

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

我的 css 规则如下所示：

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

我希望模拟此站点的水平滚动功能：http://yearinreview.hshtags.com/

【问题讨论】：

在 mac 触控板上，该页面的滚动非常不稳定，请记住这一点。

标签： javascript jquery css scroll horizontal-scrolling

【解决方案1】：

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

只需在底部添加你想要的滚动元素：

var hs = new HorizontalScroll(document.body);

而不是document.body

学习它，从中学习；）

Codepin

再解释一下：

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

鼠标滚轮（镀铬）

轮子（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，EX：

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;
}

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

【讨论】：