Question

我正在开发一个投资组合网站，用于在用户垂直滚动时水平滚动。这个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/

Answer 1

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

只需将所需的滚动元素添加到底部：

var hs = new HorizontalScroll(document.body);

而不是document.body

研究它，从中学习;）

Codepin

再解释一下：

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

鼠标滚轮（铬）

wheel （IE）

DOMMouseScroll （firefox）

因此要检测哪一个存在附件检查是否与相关元素一起进行，然后附加了滚动事件或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;
        }

一旦我们附加了正确的mousewheel事件，我们就可以通过读取传递给函数的事件对象来启动逻辑：

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

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

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

1 个答案: