Javascript 使用固定步骤（如select元素）滚动Div_Javascript_Jquery_Html

Javascript 使用固定步骤（如select元素）滚动Div

javascript jquery html

Javascript 使用固定步骤（如select元素）滚动Div,javascript,jquery,html,Javascript,Jquery,Html,我试图制作一个div，以在某些方面模仿select元素，但这也允许我以我喜欢的任何方式对每个项目/选项进行样式和布局我试图复制的一个行为是滚动，它与select元素以固定的步骤进行如何获得div元素（具有任意数量的子div）的这种行为（每个元素的子div高度相同）滚动条永远不能放在子div高度的非多个位置更新这就是我提出的解决方案： var scroller; var itemHeight = 300; function init(){ scroller = document.ge

我试图制作一个div，以在某些方面模仿select元素，但这也允许我以我喜欢的任何方式对每个项目/选项进行样式和布局

我试图复制的一个行为是滚动，它与select元素以固定的步骤进行

如何获得div元素（具有任意数量的子div）的这种行为

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

滚动条永远不能放在子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();

小提琴：

试试这个：

编辑啊，一旦改变了滚动位置，它就会自动调用，因此它最终破坏了整个过程。这应该可以

var-delta；
变量滚动条；
函数init（）{
scroller=document.getElementById（'scrollDiv'）；
scroller.onscroll=fixedcoll；
delta=scroller.scrollTop；
}
功能固定卷轴（e）{
if（增量e.target.scrollTop）
e、 target.scrollTop=delta-100；
delta=e.target.scrollTop；
}

使用滚轮和键盘滚动时效果很好，但使用鼠标（Chrome）移动滚动条时，我会感到非常不安。但是我看到了画面。。。我现在可以弄明白这一点了=）无论如何谢谢是的，onscroll事件发生在滚动之后，所以它移动到平滑的位置，然后对齐。这将导致连续尝试移动到平滑位置。您必须提供自己的滚动条或在滚动发生之前进行更改，然后防止实际的滚动事件。但是箭头也可以工作，所以你可以隐藏滚动条，只留下箭头按钮。

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>