昨天研究了一下系统滚动条，准备使用它来实现一个NumericUpDown控件，因为它可以带来最正宗的微调按钮外观
，并说了一下可以使用viewport里的onScroll事件来获取系统滚动条的上下点击动作。
同时昨天还说了onScroll事件的一个问题是，在点击了滚动条的上下按钮后，onScroll事件会被连续的触发n次(n取[1,4])。我们发现这些连续事件都在一个很小的timespan里触发的，也就在12ms以内。于是我们在onScroll事件中使用setTimeout来启动一次有意义的数值变化，代码如下，分支false用来判断点击的方向。
if ( NumericUpDown.ScrollBegin == 0 )
{
NumericUpDown.ScrollBegin =
new Date().getTime();
NumericUpDown.ChangeNumeric.Element = elmt;
window.setTimeout(NumericUpDown.ChangeNumeric, 12);
}
else
{
var time =
new Date().getTime();
if ( NumericUpDown.ScrollDirection == 0 )
{
var scrollOffset = NumericUpDown.ScrollTopValue - elmt.scrollTop;
NumericUpDown.ScrollDirection = scrollOffset > 0 ? 1 : -1;
NumericUpDown.ScrollTopValue = elmt.scrollTop;
}
}
控件使用一个DIV，一个SPAN和一个INPUT type='hidden'来实现，DIV的overflow-y设为scroll，SPAN用来显示当前的数值，INPUT type='hidden'用来存放控件当前的数值。
<
div
tabindex
="0"
Step
="1"
Precision
="0"
onscroll
="NumericUpDown.DoScroll(this)"
style
="cursor: default; border: solid 1px red; overflow-y: scroll; width: 50; height: expression(this.all.tags('SPAN')[0].offsetHeight);"
>
<
span
style
="display: block; white-space: nowrap; text-indent: 2;"
>1
span><input type="hidden" id="Hidden1" value="1" />div>
初始化控件的时候，再动态添加两个SPAN分别到默认SPAN的两端，这是因为滚动条如果处在任何一个顶端(top或bottom)是不会触发onScroll事件的，也就是说要把默认那个SPAN放到DIV的正中间，前后在分别有一个SPAN。
elmt.Current = elmt.Input.value;
var current = parseInt(elmt.Current);
var step = parseInt(elmt.Step);
var previousSpan = NumericUpDown.CreateSpan();
previousSpan.innerText = current - step;
var nextSpan = NumericUpDown.CreateSpan();
nextSpan.innerText = current + step;
var currentSpan = elmt.all.tags('SPAN')[0];
currentSpan.insertAdjacentElement('beforeBegin', previousSpan);
currentSpan.insertAdjacentElement('afterEnd', nextSpan);
NumericUpDown.ScrollTo.CurrentSpan = currentSpan;
window.setTimeout(NumericUpDown.ScrollTo, 1);
elmt.IsInitialized =
true;
控件NumericUpDown代码为：
<
script
language="javascript">
script>
由于在这个页面上注入代码太麻烦了，就把demo放到 这里了。虽然这个NumericUpDown自然的就可以支持键盘Up & Down和PageUp & PageDown，可是最后一个问题却真的没有招了，以至于我最终只能放弃这个尝试了。看看demo，框里的数字有些抖动是吧？这是系统的默认行为，而且点击的越快，抖的也越快，真的没有办法了
。
所以完成了也只能叫做Unusable版...
本文转自博客园鸟食轩的博客，原文链接：http://www.cnblogs.com/birdshome/，如需转载请自行联系原博主。
