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: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 method:Write yourself a new scroll bar, that is, a scroll bar with no div. 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= ' top:0px;z-index:9999;zoom:1;position:relative; ') ></div> ");
To 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: 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 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: 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;
