How numericupdown is implemented using the system scroll bar

We know that there is a numericupdown control in the Windows Control. After using this control, you can click the mouse or press the up or down key on the keyboard to fine tune the number. Of course, you can also enter it directly. This is a very useful control that is convenient to use and can limit the input format. Unfortunately, this control is not provided on the Web. We can only face the derivative control of several local inputs.

However, many people have made the numericupdown control alternative, but because the scrollbar control is not provided on the Web, one common problem of those alternatives is that the two buttons that are simulated for fine-tuning are always not harmonious, in addition, the display effect is greatly affected by the webpage font. The most common method is to use images. If the font is too large, the font cannot be used. It is really annoying to read half a number, either incomplete or incomplete.

Is there a way to use the system's scroll bar to fine-tune the button in the numericupdown control? This is really difficult. The easiest thing we can think of is to use input type = "text" and select to make them a line High, then a fine-tuned button similar to the numericupdown control of Windows will appear. That's right, but the problem is that the appearance of the two widgets is a system action, not an HTML Element Action (not behavior ), we have no way to read and set the attributes of this scroll bar. Just like using select, we have even made a professional NUD control.
Item 000Item 001Item 002Item 003Item 004

But there is no way to use scripts to read and set the values we want.

Since we cannot respond to any event of the system scroll bar, we should find a solution from somewhere else. The onscroll event in the viewport window is used to trigger the execution. As long as the scroll bar is moved, onscroll will trigger, which means indirectly capturing the click event on the system scroll bar, the onscroll incremental positive and negative can be used to determine whether the up button is clicked or the down button is clicked. So it seems natural to use this feature to implement the numericupdown control? Unfortunately, there are still some problems.

If we use the DIV element to create a numericupdown control,

0 11 1

. This button is already very Sinal and will not be affected by the font size. So what is the problem? The problem is that when we click the button with the mouse, the onscroll event will be triggered N (1-4) times @_@. Of course, the use of the scroll wheel or keyboard up and down keys will also trigger n onscroll events. Can n be measured? Fortunately, it was okay. It was originally affected by the font size. When the font is smallest, n = 1; when the font is smaller, n = 2; when the font is medium, larger, or largest, n = 3 or 4.

so even if we want to use onscroll, we cannot determine the N value, and the value of 3 or 4 is not necessarily true. Later, we found that the onscroll trigger time is the same. At least the millisecond value obtained using gettime () is the same. We can use this timestamp to determine whether there are still problems. Why are they all problems? Well, they are all problems. This is how to count the onscroll with the same timestamp. This problem is solved, so the numericupdown control on the Web will be very customized Sinal.