股利滾動與像選擇元素

我試圖做一個div來模擬天生在某些方面選擇元素，但也讓我的風格和佈局以任何方式，我喜歡每一個項目/選項固定的步驟。股利滾動與像選擇元素

一個行爲我試圖複製是與選擇元件固定步驟的滾動。

如何我能得到這個行爲一個div元素（與任意數量的兒童的div）？

（兒童-DIV高度是每一個元素是相同的）

滾動條不應該是能夠被放置在兒童DIV高度的非多位置。

UPDATE

這是我想出瞭解決方案：

var scroller; 
var itemHeight = 300; 
function init(){ 
scroller = document.getElementById('scrollDiv'); 
scroller.onscroll = fixedScroll; 
scroller.onmousewheel = mousewheel; 
scroller.onkeydown = keydown; 
} 
function fixedScroll(e){ 
    e.target.scrollTop = Math.round(e.target.scrollTop/itemHeight) * itemHeight; 
} 
function mousewheel(e){ 
    e.preventDefault(); 
    var sign = e.wheelDelta > 0 ? -1 : 1; 
    e.target.scrollTop += sign * itemHeight; 
} 
function keydown(e){ 
    var sign = 0; 
    if (e.keyCode === 40) sign = 1; 
    else if (e.keyCode === 38) sign = -1; 
    e.target.scrollTop += sign * itemHeight; 
} 
init();

小提琴：

http://jsfiddle.net/4tj6r/61/

來源

2014-02-10 Andreas Zita

試試這個：

編輯啊，它一旦改變了滾動位置就自動調用它，所以它最終打破了整個事情。這應該做的。

And a DEMO

var delta; 
var scroller; 
function init(){ 
scroller = document.getElementById('scrollDiv'); 
scroller.onscroll = fixedScroll; 
delta = scroller.scrollTop; 
} 
function fixedScroll(e){ 
if(delta < e.target.scrollTop) 
    e.target.scrollTop = delta + 100; 
if(delta > e.target.scrollTop) 
    e.target.scrollTop = delta - 100; 
delta = e.target.scrollTop; 
} 

<body onload="init();"> 
<div id="scrollDiv" style="overflow:auto;height:100px;"></div>

來源

2014-02-10 19:40:13 ElDoRado1239

作品以及與車輪和鍵盤，但滾動時用鼠標移動滾動條時器（Chrome），我得到一個非常緊張的運動。 –

但我得到的圖片......我現在就可以算出這個=）還是要謝謝你 –

呀，onscroll事件發生-after-滾動，所以它移動到一個平滑的位置，然後對齊。這將導致不斷嘗試轉向平滑的位置。您必須提供自己的滾動條或在滾動發生之前進行更改，然後阻止實際的滾動事件。但箭頭也可以工作，所以你可以隱藏滾動條，只留下箭頭按鈕。 – ElDoRado1239

股利滾動與像選擇元素

回答

相關問題