2 ways to customize the scroll bar style with Div+jquery

You can set the Overflow-x:auto;overlfow-y:auto of the left menu item div so that the scroll bar is automatically generated, but everyone knows it doesn't look good. The next point is, how do you change the style of the scroll bar? Interested friends can understand the following article

A recent project has a module for real-time monitoring, there is a menu bar on the left to display all the devices, of course, is dynamically obtained from the database, the right is an IFRAME to display the monitoring screen. Originally this function is not complex, the menu item on the left is to use dtree.js to achieve, when the function is completed, but found a problem, that is, the left menu bar in the name of the device will be very long, will exceed the length of the Div, exactly the left side of the iframe width and length is not enough. Then, you have to use the scroll bar, you can set the left menu item Div Overflow-x:auto;overlfow-y:auto, this will automatically generate the scroll bar, but we all know that it is not good-looking. The next point is, how do you change the style of the scroll bar?

after continuous search from the Internet, there are two ways to find out:

The first method: the use of CSS provided by the style, a total of 8 attributes bar, here do not do a detailed introduction, online a lot of this information.

The second way: write a new scroll bar, that is, no div with the scroll bar. What kind of effect would you like to have? Concrete implementation, in the online search a lot, you can find that basically only vertical scroll bar, and there is no horizontal scroll bar, but under, I use jquery to write another scroll bar, of course, also learn from only the vertical scroll bar program.

Say the concrete realization thought: The goal div that needs to generate the scroll bar Div, inside nested 3 Div, is for displays the content the Div_content, displays the vertical scroll bar the Div_h, displays the horizontal scroll bar the Div_w, The specific layout is in accordance with the layout of the div with the scroll bar, and then show the scroll bar of the div namely Div_h and Div_w have their own 3 Div, that is, the left and right arrows 2, the scroll bar 1. The specific code is as follows:

Copy Code code as follows:


if ($ (_self). Children (". Jscroll-c"). Height () ==null) {


Add Content Box (DIV)


$ (_self). Wrapinner ("<div class= ' jscroll-c" style=; ></div> ");


//Add 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: Hidden ' ></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></div> ');


//Add 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: Hidden ' ></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></div> ');


}

Then nothing more than a few judgments, the content of the div is beyond the scope of the Div, listening to the event to add. Specific code can be seen in my download resources;