Javascript custom scroll bar implementation code

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:

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