You can set the 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 it. Next we will focus on how to modify the style of the scroll bar? If you are interested, you can find out that a module in this 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, and an iframe on the right is 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 length of p, 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 menu item p. Then the scroll bar is automatically generated, 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 p. 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 p is the p that needs to generate the scroll bar, which contains three p, respectively, p_content used to display the content and p_H for displaying the vertical scroll bar, display p_W of the horizontal scroll bar. The specific layout is the same as that of p of the built-in scroll bar. Then, p of the displayed scroll bar contains three p, namely, p_H and p_W, that is, there are two arrows, and one scroll bar. The Code is as follows:
The Code is as follows:
If ($ (_ self). children (". jscroll-c"). height () = null ){
// Add content box (p)
$ (_ Self). wrapInner ("
");
// Add a vertical scroll bar
$ (_ Self). append ("
");
// Add a horizontal scroll bar
$ (_ Self). append ("
");
}
Then there is nothing more than some judgment, whether the content of p exceeds the scope of p, and the addition of listening events. The specific code shows my download resources;
