2 ways to customize the scroll bar style using div jquery

2 ways to customize the scroll bar style using div jquery_jquery

WBOY

Release： 2016-05-16 17:28:20

Original

1205 people have browsed it

There is a module in the recent project for real-time monitoring. There is a menu bar on the left to display all the devices, which of course is dynamically obtained from the database. There is an iframe on the right for displaying the monitoring screen. Originally, this function was not complicated. The menu items on the left were implemented using dtree.js. However, after the function was completed, a problem was discovered. Some of the device names in the menu bar on the left were very long and exceeded the requirements. The length of the div, to be precise, is not enough width and length of the iframe on the left. Then, you must use the scroll bar at this time. You can set the overflow-x:auto;overlfow-y:auto; of the left menu item div. This will automatically generate the scroll bar, but everyone knows that the built-in one does not look good. Next is the key point, how to modify the style of the scroll bar?

After constant searching on the Internet, I found that there are two methods:

The first method: Use the styles provided by CSS, a total of There are 8 attributes. I won’t introduce them in detail here. There is a lot of information about this on the Internet.

The second method: Write a new scroll bar yourself, that is, do not use the scroll bar that comes with the div. In this way, you can get whatever effect you want. For the specific implementation, I searched a lot on the Internet and found that there were basically only vertical scroll bars and no horizontal scroll bars. In desperation, I used jquery to write another scroll bar. Of course, I also borrowed the program that only had vertical scroll bars.

Let me talk about the specific implementation ideas: the target div is the div that needs to generate scroll bars. There are three divs nested in it, which are div_content for displaying content, div_H for displaying vertical scroll bars, and horizontal scrolling. The specific layout of the div_W of the bar is the same as that of the div with its own scroll bar. Then the divs that display the scroll bar, namely div_H and div_W, each contain 3 divs, namely 2 left and right arrows and 1 scroll bar. The specific code is as follows:

Copy code The code is as follows:

if($(_self).children (".jscroll-c").height()==null){ 
//Add content box (div) 
$(_self).wrapInner("
"); 
//Add vertical scroll bar
$(_self).append ("< ;/div> 
"); 
//Add a horizontal scroll bar
$(_self).append("
"); 
} 

Then it is nothing more than some judgment, whether the content of the div exceeds the scope of the div, and the addition of listening events. The specific code can be found in my download resources;                