Question

我正在尝试使div在某些方面模仿select元素，但这也允许我以任何我喜欢的方式设置和布局每个项目/选项。

我正在尝试复制的一个行为是使用select元素固定步骤的滚动。

如何为div-element（具有任意数量的child-div）获取此行为？

（每个元素的child-div高度相同）

永远不能将滚动条放在child-div高度的非多位置。

更新

这是我提出的解决方案：

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/

Answer 1

试试这个：

编辑啊，一旦改变滚动位置就会调用自己，所以它最终打破了整个事情。这应该做。

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>

使用select元素等固定步骤进行Div滚动

1 个答案: