將垂直滾動用戶操作以清單顯示爲水平滾動

我正在設計用於在用戶垂直滾動時水平滾動的投資組合網站。這個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/

來源

2015-07-02 Norah Palmer

該頁面上的滾動在Mac觸控板上令人難以置信的波動，需要記住。 – Jan

製造這個很久以前，它會將您的鼠標滾動成水平滾動，幷包括動態滾動和適應大多數的交織..

只需在底部添加你想要的滾動元素：

的

var hs = new HorizontalScroll(document.body);

代替document.body

研究它，從中吸取教訓;）

Codepin

要解釋一下：

有基於其瀏覽器的許多不同的鼠標滾動事件目前正在使用：

mousewheel（鉻）

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

一旦我們有ATTAC建置到正確的鼠標滾輪事件，我們可以開始我們的邏輯通過讀取傳遞到函數的事件對象：

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

在我們正在尋找的也將依賴於瀏覽器的事件對象的屬性，也值會有所不同Firefox和Chrome/IE/Safari之間。

eventObject.wheelDelta（IE /鉻/ Safari瀏覽器）

eventObject.deltaY（火狐）

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

移動的問題，我們將簡單地採取我們的結局元素增量的值，並且將其添加到scrollLeft：

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

並且那它，一個跨瀏覽器滾動系統，其覆蓋默認到水平:)

來源

2015-07-02 21:42:42

將垂直滾動用戶操作以清單顯示爲水平滾動

回答

相關問題