Scroll bar beautification Practice (native Js,iscroll,nicescroll)

The recent need to retrofit the scroll bar in the project, so that the original scroll bar in the three major browsers to perform the same, share their own transformation experience:

The scroll bars in the project are distributed in the small windows of the Web page, using-webkit-scrollbar production, which is very beautiful under the browser of the-webkit kernel, but not compatible under IE and Firefox, or a very ugly default style.

The original plan to use CSS hack to make a patch to beautify, think of IE hack color after the default scroll bar, feel all over "blue thin mushroom." So decided to rewrite this part, anyway, after the use of the place can be directly taken out.

The first plan to write your own handwriting, anyway logic is quite simple, set a ratio dragged away Bai

The simple code is as follows:

    //get page elements, useful elements include "viewport", "scrolling content", "scroll bar", "scroll track"    varbox = document.getElementById ("box"); varContent = Box.children[0]; varScroll = box.children[1]; varBar = scroll.children[0]; //first, the bar's height is calculated according to the size of box and content    varBili = box.offsetheight/Content.offsetheight; //multiply the ratio by the height of the scrollBar.style.height = scroll.offsetheight * bili + "px"; //Click the scrollbar bar to calculate the position of the mouse within the bar.Bar.onmousedown =function(e) {vary = e.clienty-bar.offsettop-Box.offsettop; //Start draggingDocument.onmousemove =function(e) {//get the new location of the mouse            varCurrentY = e.clienty-y-Box.offsettop; //need to set the upper and lower limits with CurrentY            if(CurrentY < 0) {CurrentY= 0; }            if(CurrentY > Scroll.offsetheight-bar.offsetheight) {currenty= Scroll.offsetheight-Bar.offsetheight; }            //set to top value of barBar.style.top = currenty + "px"; //text selection when scrolling is canceledWindow.getselection?window.getselection (). Removeallranges (): Document.selection.empty (); //make text move, scale conversion ... Content.style.top =-currenty/bili + "px";    }    }; Document.onmouseup=function() {Document.onmousemove=NULL; }

View Code

That's it? Oh, don't be naïve.

Scroll bar position, scroll bar in the menu position is not affected by any, once moved into the right side of the Ifarme embedded window is invalidated, because the above code is bound to the document in the IFrame window also exists.

How to solve this problem, in the Internet to find the majority of days no related results, the results of a QQ small partners to a site Document.domain, have a point of view, the main point is to find this iframe, and then to this Ifame binding event monitoring.

The key point is $ ("iframe"). Contents (). Find ("Body"). MouseMove (function () {someting to do  })

Similarly, when the mouse is lifted up, it is bound to the top.

Note here to prevent the mouse drag and the mouse lifted the target element is not the same caused by the bug, in the root document and the document inside the IFrame is bound to the event monitoring. Oh... Feel silly (the code here has been lost, but very simple, the above native JS code has been written by me as jquery)

If you only implement a scroll bar can be dragged at the edge of the IFRAME is now available, but the leader said also to implement the scroll wheel on the menu list, you can also call the scroll bar, think or use a plug-in, you can achieve more features.

The first plugin found is the Iscroll GitHub address in the Chinese document address

Basic usage can be seen on GitHub, but I didn't find the styling (for example, color, wide-height features)

So in the source code to make the following changes

The following modifications were made in lines 1002 and 1009

Added a parameter This.options.myStyle

 This  This // v stands for vertical  This this. Options.mystyle)   //H stands for  horizontal

1662 rows added a parameter mystyle

function Createdefaultscrollbar (direction, interactive, type, MyStyle)

Line 1668 adds this code.

//Custom Styles        if(MyStyle) {//An object is passed in            varCssstring =Indicator.style.cssText; varnewcssstring = ' '; vararr = Cssstring.split ('; ')); varobj ={};  for(vari=0; i<arr.length; i++) {//generate the object form of the default style                varTemparr = Arr[i].split (': ')); obj[temparr[0]]=temparr[1]; }            /*If there is a new property replaced by the original attribute, if not added, the default is to use the original **/             for(varKinchobj) {                 for(varJinchMyStyle) {                    if(j==k) {Obj[k]=Mystyle[j]; }Else{Obj[j]=Mystyle[j];            }                }            };  for(varKinchobj) {newcssstring+ = k + ': ' +obj[k] + ' \; ' ; } Indicator.style.cssText=newcssstring; }

Then add the following code to the common component JS

/** Initialize scroll bar * need to depend on Iscroll.js * @param * viewbox scrolling part of the outer window using Queryselector can * fadescrollbars whether to show/hide scroll bar true/false * MyStyle for custom style, if custom style overrides default style, otherwise use default style data type Object->{' background-color ': ' Red '} **///Draw scroll BarsfunctionScrollinit (viewbox,fadescrollbars,mystyle) {functionloaded (viewbox,fadescrollbars,mystyle) {varMyscroll =NewIscroll (Viewbox, {scrollbars:true, MouseWheel:true, Interactivescrollbars:true, Shrinkscrollbars:' Scale ', Fadescrollbars:fadescrollbars,//whether to hide scroll bars in the inactive stateMystyle:mystyle}); } document.addeventlistener (' Touchmove ',function(e) {E.preventdefault ();},false);    Loaded (Viewbox,fadescrollbars,mystyle); }

You can then call the Scrollinit method after the list data is rendered.

However, it is still not possible to solve the problem of the scroll bar at the edge of the IFRAME, but this time the performance is to drag the scroll bar on the IFRAME can be moved, in the menu area drag no way to move.

To do here I gave up this plugin, why? Because the project to be compatible to IE8, accidentally saw a transfrom translate property in the control of the position of the scroll bar, hehe, must be good to first optimistic about compatibility.

View the best web site for CSS compatibility caniuse.com

A second plugin Jquery.nicescroll

I'm relieved to see the position of this plugin's scroll bar using position control.

Nicescroll supports setting CSS styles, so it's fine for my needs to be as long as there's no effect on the edge of the IFRAME.

Then make the following changes to the source code

In the 1760 line bound event, add the following code to

if (parent.document) {              self.win:parent.document, "MouseUp", self.onmouseup);              " MouseMove ", Self.onmousemove);            };

and replace the code in the tool library with this one.

The reason for adding a previewbox is that the data in the scrollbar area is refreshed locally with the page operation, but the drawing code follows the execution, preventing duplication of drawing and making a judgment

Like all other tools, it hangs on jquery.

//Draw scroll Bars    varPreviewbox =NULL; $.scrollinit=function(Viewbox,color,hidden) {if(Viewbox!== Previewbox) {//Check if you have previously drawn, no longer drawPreviewbox =Viewbox; $ (Viewbox). Nicescroll ({cursorcolor:color,//#CC0071 cursor ColorCursoropacitymax:1,//change opacity very cursor is active (scrollabar "visible" state), ranging from 1 to 0Touchbehavior:false,//Drag the cursor to scroll like a touch device on a desktop computerCursorwidth: "5px",//width of the pixel cursorCursorborder: "0",//cursor Border CSS definitionCursorborderradius: "5px",//the radius of the cursor boundary in pixelsAutohidemode:hidden//whether to hide scroll bars            }); }    }

Then call Scrollinit on the part where you want to draw the scroll bar.

Seemingly simple changes, stepped on a lot of pits, or their own iframe nested after the relationship with the original page is not clear, share their own experience, hope to help the people who need.

Rookie diary, Big God Light spray ....

Scroll bar beautification Practice (native Js,iscroll,nicescroll)