JavaScript custom scroll bar implementation code

In work, we often encounter content that exceeds a fixed range. Generally, scroll bars are used to scroll and display the exceeded content.

But using the browser's default scroll bar is often looked down upon by product managers, but using css cannot change the style of the scroll bar. Fortunately, there is a universal js ^_^~~

online There are various plug-ins, but the most convenient one is to write it yourself. You can also play and learn at the same time, and make enough food and clothing by yourself (*^__^*)

These three problems are deeply troubled. Me:

1. Scroll bar height

2. How far the scroll bar should move each time the up and down buttons are clicked

3. 1px scrolling per drag Bar, how much does the page need to move?

The entire framework probably looks like this:

Let’s take a look at the first question first.

Since we already know the height of the content area, the visual height of the content and the height of the scrollable area of the scroll bar, since the content area is proportional to the distance of each movement of the scroll bar, the first The problem is easy to solve:

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

How far should the scroll bar move every time the button is clicked?

Here I set a value for the parameter distance to determine how far the content area should scroll each time the button is clicked. Changing this value can change the scrolling speed of the content area. If you have better processing methods and suggestions, please tell me~

Currently, the distance of each scrolling of the content area is known, and the rest is to calculate the scrolling How far should the bars move relative to each other?

The movable range of the scroll bar / the distance the scroll bar moves each time = the height of the content area / the distance the content area moves each time

The effect is as follows:

There is another problem here, that is, you have to distinguish between a single click and a long press.

So you have to judge the duration from pressing the button to releasing it. Currently it is set to

When dragging the scroll bar, how much does the content area need to move for each 1px scroll bar movement?

First know what percentage of the scroll bar's movable range each 1PX distance accounts for, and then divide the content area height by the percentage obtained to get the relative scrolling distance of the content area for each 1px movement of the scroll bar. .

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

The complete code of the demo is as follows:

Note: Because it is written in seajs, please pay a little attention to the loading of the file

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