Javascript custom scroll bar implementation code _ javascript skills

This article mainly introduces the javascript custom scroll bar implementation code, which has a certain reference value. Interested friends can refer to the content that is often encountered in the work that will go beyond a fixed range, the content that exceeds the limit is generally displayed in a scroll bar.

However, the default browser scroll bar is often despised by the product manager, but css cannot change the style of the scroll bar. Fortunately, there is a omnipotent js scroll _^ ~~

There are a variety of plug-ins on the Internet, but the best thing is to write it yourself. You can also learn it while learning it by yourself (* ^__ ^ *)

These three problems have deeply plagued me:

• 1. Scroll Bar Height
• 2. How long should the scroll bar move every time you click the up or down button?
• 3. How much do I need to move the page every time I drag the 1px scroll bar?

The entire framework is like this:

Let's take a look at the first question.

As we know the height of the content area and the visible height of the content and the height of the area where the scroll bar can be rolled, because the distance between the content area and each move of the scroll bar is proportional, therefore, the first problem is well solved:

　　Scroll bar movable range/scroll bar Height = content height/content visible height

How long should the scroll bar move when you click a button?

Here, I set a value for the distance parameter to determine the size of the content area to scroll when each button is clicked. Changing this value can change the scrolling speed of the content area. If you have better solutions and suggestions, please let me know ~

At present, the distance between each scroll in the content area is known, and the rest is to calculate the distance between the scroll bar and the expected movement?

　　Scroll bar movable range/scroll bar moving distance = content area height/content area moving distance

The effect is as follows:

There is another problem here, that is, it is also necessary to distinguish between a single click or a long press.

Therefore, you have to determine the duration from when the button is pressed to when it is released. Currently, it is set to <MS as a single click; otherwise, it is a long press:

When dragging a scroll bar, how much does the content area need to be moved for every 1px scroll bar to be moved?

The crowdsourced security testing shows that the distance of each 1PX area is a few percent of the mobile range of the scroll bar. Then, the percentage of the content area height divided by the obtained percentage is used to determine the relative scrolling distance of each 1px content area of the scroll bar.

Content area rolling distance = content area height/(scroll bar rolling area/1)

The complete demo code is as follows:

Note: Because seajs is used, pay attention to file loading.

Css:

.wapper{scrollbar-3dlight-color:#000; position:relative; height:302px;width:300px;overflow:hidden;margin:0 auto;line-height:40px;text-align:center;} .area{background-color:#E2E2EF;width:100%; position:absolute;top:0px;left:0px;} .bar{position:absolute;top:0px;right:0px; height:100%;width:1rem;background-color:#ccc;} .scroll,.middle,.forward,.backward{display:block;cursor:pointer;position:absolute;right:0px;width:100%;} .forward,.backward{height:16px;background-color:#6868B1;} .middle{background-color:rgba(255, 255, 255, 0.22);top:16px;cursor:auto;} .scroll{position:absolute;top:0px;background-color:#C2C2E9;} .forward{top:0px;} .backward{bottom:0px;}

Html:

 
  
1. this is content
  
2. this is content
  
3. this is content
  
4. this is content
  
5. this is content
  
6. this is content
  
7. this is content
  
8. this is content
  
9. this is content
  
10. this is content
  
11. this is content