Use div + jquery to customize the scroll bar style

Recently, a module in the project is used for real-time monitoring, and a menu bar on the left is used to display all devices. Of course, it is dynamically obtained from the database, the right side is an iframe used to display the monitoring screen. Originally, this function is not complex. The menu item on the left uses dtree. when the function is completed, the device name in the left-side menu bar will be long and exceed the div length, the width and length of the Left iframe are not enough. Then, you must use the scroll bar. You can set overflow-x: auto; overlfow-y: auto; of the left-side menu item div. This will automatically generate a scroll bar, but we all know that it is not easy to bring. Next we will focus on how to modify the style of the scroll bar?

After searching on the internet, we found that there are two methods:

Method 1:The style provided by CSS is a total of eight attributes. I will not detail them here. There are a lot of materials on the Internet.

Method 2:Write a new scroll bar by yourself, that is, do not use the built-in scroll bar of the div. In this way, the desired effect will be displayed. I searched a lot on the Internet and found that there was only a vertical scroll bar, but there was no horizontal scroll bar. However, I used jquery to write another scroll bar, of course, only the vertical scroll bar program is also used for reference.

Let's take a look at the specific implementation ideas: the target div is the div that needs to generate the scroll bar, which is nested with three div_content, which is used to display the content and display the div_H of the vertical scroll bar, display div_W of the horizontal scroll bar. The layout is the same as that of the div of the built-in scroll bar. The div of the displayed scroll bar, div_H and div_W, respectively contain three Divs, that is, there are two arrows, and one scroll bar. The Code is as follows:
Copy codeThe Code is as follows:
If ($ (_ self). children (". jscroll-c"). height () = null ){
// Add content box (div)
$ (_ Self ). wrapInner ("<div class = 'jscroll-C' style = 'top: 0px; z-index: 9999; zoom: 1; position: relative; '> </div> ");
// Add a vertical scroll bar
$ (_ Self ). append ("<div class = 'jscroll-e' unselectable = 'on' style = 'height: 97.5%; top: 0px; right: 0;-moz-user-select: none; position: absolute; overflow: hidden; z-index: 10000; '> <div class = 'jscroll-U' style = 'position: absolute; top: 0px; width: 100%; right: 0; background: blue; overflow: Den den '> </div> <div class = 'jscroll-H' unselectable = 'on' style = 'background: green; position: absolute; left: 0;-moz-user-select: none; border: 1px solid'> </div> <div class = 'jscroll-d' style = 'position: absolute; bottom: 0px; width: 100%; left: 0; background: blue; overflow: hidden '> </div> ");
// Add a horizontal scroll bar
$ (_ Self ). append ("<div class = 'jscroll-S' unselectable = 'on' style = 'width: 180px; bottom: 0px; left: 0;-moz-user-select: none; position: absolute; overflow: hidden; z-index: 10000; '> <div class = 'jscroll-l' style = 'position: absolute; bottom: 0px; height: 100%; left: 0; background: blue; overflow: Den den '> </div> <div class = 'jscroll-G' unselectable = 'on' style = 'height: 100%; background: green; position: absolute; left: 0;-moz-user-select: none; border: 1px solid'> </div> <div class = 'jscroll-R' style = 'position: absolute; bottom: 0px; height: 100%; right: 0; background: blue; overflow: hidden '> </div> ");
}

Then it is nothing more than some judgment, whether the content of the div exceeds the div range, listening to the addition of events. The specific code shows my download resources;