Customize the scroll bar (scrollbar) with JScrollPane

Allow, selamat pagi, sesi kali ini akan membahas tentang widgets windows 7 Customize the scroll bar (scrollbar) with JScrollPane simak selengkapnya

JScrollPane is a jQuery script that allows you to change the blog' scroll bar, ie the browser scrollbar.

Although we can use CSS to change it, the problem is that is not standardized, because with CSS we can make it work only in Chrome and Safari; and in the case of Internet Explorer it also has its own code but obviously it only works in that browser (I don't know which versions). So what we will do then is to give a new look to the scrollbar but by using jQuery, so the change will be visible in all browsers.

You can see an example in this test blog where the scroll kafetaria has a different shape and color.

1. Go to Template > Edit HTML and before </head> paste this code:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

<style>

.jspContainer overflow: hidden;position: relative;.jspPane position: absolute;

.jspVerticalBar position: absolute;top: 0;right: 0;width: 16px;height: 100%;background: #ccc;

.jspHorizontalBar position: absolute;bottom: 0;left: 0;width: 100%;height: 16px;background: #ccc;

.jspVerticalBar *,.jspHorizontalBar * margin: 0;padding: 0;

.jspCap display: none;.jspHorizontalBar .jspCap float: left;

.jspTrack

background: #fff; /* background color of the kafetaria */

position: relative;



.jspDrag

background: #CC0000; /* Color of the scrollbar */

position: relative;

top: 0;

left: 0;

cursor: pointer;



.jspHorizontalBar .jspTrack,

.jspHorizontalBar .jspDrag

float: left;

height: 100%;



.jspArrow

background: #888; /* The color of the scrollbar limits */

text-indent: -20000px;

display: block;

cursor: pointer;



.jspArrow.jspDisabled

cursor: default;

background: #333; /* Color of the limits when the srollbar is reaching them */



.jspVerticalBar .jspArrow

height: 16px;



.jspHorizontalBar .jspArrow

width: 16px;

float: left;

height: 100%;



.jspVerticalBar .jspArrow:focus outline: none;.jspCorner background: #eeeef4;float: left;height: 100%;* html .jspCorner margin: 0 -3px 0 0;

html, body

height: 100%;

margin: 0;

padding: 0;



#blog-container

height: 100%;

margin: 0;

padding: 0;

overflow: auto;



</style>

<script>

//<![CDATA[

/*! Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net)

* Licensed under the MIT License (LICENSE.txt).

* Version: 3.1.3

*/

(function (factory)

if ( typeof define === 'function' && define.amd )

define(['jquery'], factory);

else if (typeof exports === 'object')

module.exports = factory;

else

// Browser globals

factory(jQuery);



(function ($) document.documentMode >= 9 ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];

var lowestDelta, lowestDeltaXY;

if ( $.event.fixHooks )

for ( var i = toFix.length; i; )

$.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;

$.event.special.mousewheel =

setup: function()

if ( this.addEventListener )

for ( var i = toBind.length; i; )

this.addEventListener( toBind[--i], handler, false );



else

this.onmousewheel = handler;



,

teardown: function()

if ( this.removeEventListener )

for ( var i = toBind.length; i; )

this.removeEventListener( toBind[--i], handler, false );



else

this.onmousewheel = null;





;

$.fn.extend(

mousewheel: function(fn)

return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");

,

unmousewheel: function(fn)

return this.unbind("mousewheel", fn);



);

function handler(event)

var orgEvent = event

if ( orgEvent.detail ) muara sungai = orgEvent.detail * -1;

if ( orgEvent.deltaY )

deltaY = orgEvent.deltaY * -1;

delta = deltaY;



if ( orgEvent.deltaX )

deltaX = orgEvent.deltaX;

delta = deltaX * -1;



if ( orgEvent.wheelDeltaY !== undefined ) deltaY = orgEvent.wheelDeltaY;

if ( orgEvent.wheelDeltaX !== undefined ) deltaX = orgEvent.wheelDeltaX * -1;

absDelta = Math.abs(delta);

if ( !lowestDelta || absDelta < lowestDelta ) lowestDelta = absDelta;

absDeltaXY = Math.max(Math.abs(deltaY), Math.abs(deltaX));

if ( !lowestDeltaXY || absDeltaXY < lowestDeltaXY ) lowestDeltaXY = absDeltaXY;

fn = delta > 0 ? 'floor' : 'ceil';

delta = Math[fn](delta / lowestDelta);

deltaX = Math[fn](deltaX / lowestDeltaXY);

deltaY = Math[fn](deltaY / lowestDeltaXY);

args.unshift(event, delta, deltaX, deltaY);

return ($.event.dispatch || $.event.handle).apply(this, args);

}

}));

/*

* jScrollPane - v2.0.0beta5 - 2010-09-18

* http://jscrollpane.kelvinluck.com/

* Copyright (c) 2010 Kelvin Luck

* Dual licensed under the MIT and GPL licenses.

*/

(function(b,a,c)0)+(parseInt(C.css("paddingRight")));ah=C.innerWidth()+g;v=C.innerHeight();C.width(ah);V=b('<div class="jspPane" />').wrap(b('<div class="jspContainer" />').css(width:ah+"px",height:v+"px"));C.wrapInner(V.parent());aj=C.find(">.jspContainer");V=aj.find(">.jspPane");V.css("padding",aE)}elseC.outerHeight()!=v;if(aI)ah=C.innerWidth()+g;v=C.innerHeight();aj.css(width:ah+"px",height:v+"px")aA=V.innerWidth();if(!aI&&V.outerWidth()==Q&&V.outerHeight()==W)av)V.css("width",aA+"px");C.css("width",(aA+g)+"px")returnV.css("width",null);C.css("width",(ah)+"px");aj.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()aL=V.clone().css("position","absolute");aK=b('<div style="width:1px; position: relative;" />').append(aL);b("body").append(aK);Q=Math.max(V.outerWidth(),aL.outerWidth());aK.remove();W=V.outerHeight();y=Q/ah;q=W/v;av=q>1;aB=y>1;if(!(aB||av))C.removeClass("jspScrollable");V.css(top:0,width:aj.width()-g);n();D();O();w();af()elseC.addClass("jspScrollable");aJ=au.maintainPosition&&(HaC();z();E();if(aJ)K(aG);J(aF)I();ad();if(au.enableKeyboardNavigation)P()if(au.clickOnTrack)p()B();if(au.hijackInternalLinks)m()}if(au.autoReinitialise&&!aq)aq=setInterval(function()an(au),au.autoReinitialiseDelay)elseif(!au.autoReinitialise&&aq)clearInterval(aq)C.trigger("jsp-initialised",[aB||av])}function aC()if(av)aj.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));R=aj.find(">.jspVerticalBar");al=R.find(">.jspTrack");ap=al.find(">.jspDrag");if(au.showArrows)am=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",az(0,-1)).bind("click.jsp",ax);ac=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",az(0,1)).bind("click.jsp",ax);if(au.arrowScrollOnHover)am.bind("mouseover.jsp",az(0,-1,am));ac.bind("mouseover.jsp",az(0,1,ac))ai(al,au.verticalArrowPositions,am,ac)t=v;aj.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function()t-=b(this).outerHeight());ap.hover(function()ap.addClass("jspHover"),function()ap.removeClass("jspHover")).bind("mousedown.jsp",function(aF)b("html").bind("dragstart.jsp selectstart.jsp",function()return false);ap.addClass("jspActive");var s=aF.pageY-ap.position().top;b("html").bind("mousemove.jsp",function(aG)S(aG.pageY-s,false)).bind("mouseup.jsp mouseleave.jsp",ar);return false);o()function o()al.height(t+"px");H=0;U=au.verticalGutter+al.outerWidth();V.width(ah-U-g);if(R.position().left==0)V.css("margin-left",U+"px")function z()if(aB)aj.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));ak=aj.find(">.jspHorizontalBar");F=ak.find(">.jspTrack");h=F.find(">.jspDrag");if(au.showArrows)at=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",az(-1,0)).bind("click.jsp",ax);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",az(1,0)).bind("click.jsp",ax);

if(au.arrowScrollOnHover)at.bind("mouseover.jsp",az(-1,0,at));x.bind("mouseover.jsp",az(1,0,x))ai(F,au.horizontalArrowPositions,at,x)h.hover(function()h.addClass("jspHover"),function()h.removeClass("jspHover")).bind("mousedown.jsp",function(aF)b("html").bind("dragstart.jsp selectstart.jsp",function()return false);h.addClass("jspActive");var s=aF.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aG)T(aG.pageX-s,false)).bind("mouseup.jsp mouseleave.jsp",ar);return false);l=aj.innerWidth();ae()elsefunction ae()aj.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function()l-=b(this).outerWidth());F.width(l+"px");X=0function E()if(aB&&av)var aF=F.outerHeight(),s=al.outerWidth();t-=aF;b(ak).find(">.jspCap:visible,>.jspArrow").each(function()l+=b(this).outerWidth());l-=s;v-=s;ah-=aF;F.parent().append(b('<div class="jspCorner" />').css("width",aF+"px"));o();ae()if(aB)V.width((aj.outerWidth()-g)+"px")W=V.outerHeight();q=W/v;if(aB)ao=1/y*l;if(ao>au.horizontalDragMaxWidth)ao=au.horizontalDragMaxWidthelseif(ao<au.horizontalDragMinWidth)ao=au.horizontalDragMinWidthh.width(ao+"px");j=l-ao;ab(X)if(av)A=1/q*t;if(A>au.verticalDragMaxHeight)A=au.verticalDragMaxHeightelseif(A<au.verticalDragMinHeight)A=au.verticalDragMinHeightap.height(A+"px");i=t-A;aa(H)function ai(aG,aI,aF,s)var aK="before",aH="after",aJ;if(aI=="os")aI=/Mac/.test(navigator.platform)?"after":"split"if(aI==aK)aH=aIelseif(aI==aH)aK=aI;aJ=aF;aF=s;s=aJaG[aK](aF)[aH](s)function az(aF,s,aG)return function()G(aF,s,this,aG);this.blur();return falsefunction G(aH,aF,aK,aJ)aK=b(aK).addClass("jspActive");var aI,s=function()b("html");aJ.bind(aI,function()aK.removeClass("jspActive");clearInterval(aG);aJ.unbind(aI))function p()elseif(aJ<H)S(H-au.trackClickSpeed)elseaF()},au.trackClickRepeatFreq),aF=function()s&&clearInterval(s);s=null;b(document).unbind("mouseup.jsp",aF);b(document).bind("mouseup.jsp",aF);return false}})}if(aB)aH.originalTarget==aH.currentTarget)var aG=b(this),s=setInterval(function()var aI=aG.offset(),aJ=aH.pageX-aI.left;if(X+ao<aJ)T(X+au.trackClickSpeed)elseif(aJ<X)T(X-au.trackClickSpeed)elseaF(),au.trackClickRepeatFreq),aF=function()s&&clearInterval(s);s=null;b(document).unbind("mouseup.jsp",aF);b(document).bind("mouseup.jsp",aF);return false)}}function w()F&&F.unbind("mousedown.jsp");al&&al.unbind("mousedown.jsp")function ar()b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");ap&&ap.removeClass("jspActive");h&&h.removeClass("jspActive")function S(s,aF)if(!av)returnif(s<0)s=0elseif(s>i)s=iif(aF==c)aF=au.animateScrollif(aF)N.animate(ap,"top",s,aa)elseap.css("top",s);aa(s)function aa(aF)if(aF==c)aF=ap.position().topaj.scrollTop(0);H=aF;var aI=H==0,aG=H==i,aH=aF/i,s=-aH*(W-v);if(ag!=aIfunction T(aF,s)if(!aB)returnif(aF<0)aF=0elseif(aF>j)aF=jif(s==c)s=au.animateScrollif(s)N.animate(h,"left",aF,ab)elseh.css("left",aF);ab(aF)function ab(aF)if(aF==c)k!=aH)M=aI;k=aH;C.trigger("jsp-arrow-change",[ag,aD,M,k])r(aI,aH);V.css("left",s);C.trigger("jsp-scroll-x",[-s,aI,aH])function u(aF,s)if(au.showArrows)am[aF?"addClass":"removeClass"]("jspDisabled");ac[s?"addClass":"removeClass"]("jspDisabled")function r(aF,s)if(au.showArrows)at[aF?"addClass":"removeClass"]("jspDisabled");

x[s?"addClass":"removeClass"]("jspDisabled")function J(s,aF)var aG=s/(W-v);S(aG*i,aF)function K(aF,s)var aG=aF/(Q-ah);T(aG*j,s)function Y(aN,aL,aF)var aJ,aH,s=0,aG,aK,aM;tryaL)aM=s-au.verticalGutterelseif(s+aH>aK)aM=s-v+aH+au.verticalGutterif(aM)J(aM,aF)function ay()return -V.position().leftfunction aw()return -V.position().topfunction ad()aj.unbind(Z).bind(Z,function(aI,aJ,aH,aF)var aG=X,s=H;T(X+aH*au.mouseWheelSpeed,false);S(H-aF*au.mouseWheelSpeed,false);return aG==X&&s==H)function n()aj.unbind(Z)function ax()return falsefunction I()V.unbind("focusin.jsp").bind("focusin.jsp",function(s)if(s.target===V[0])returnY(s.target,false))function D()V.unbind("focusin.jsp")function P()var aF,s;C.attr("tabindex",0).unbind("keydown.jsp").bind("keydown.jsp",function(aJ)if(aJ.target!==C[0])returnvar aH=X,aG=H,aI=aF?2:16;switch(aJ.keyCode)case 40:S(H+aI,false);break;case 38:S(H-aI,false);break;case 34:case 32:J(aw()+Math.max(32,v)-16);break;case 33:J(aw()-v+16);break;case 35:J(W-v);break;case 36:J(0);break;case 39:T(X+aI,false);break;case 37:T(X-aI,false);breakif(!(aH==X&&aG==H))aF=true;clearTimeout(s);s=setTimeout(function()aF=false,260);return false);if(au.hideFocus)C.css("outline","none");if("hideFocus" in aj[0])C.attr("hideFocus",true)elseC.css("outline","");if("hideFocus" in aj[0])C.attr("hideFocus",false)function O()C.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp")function B()if(location.hash&&location.hash.length>1)var aG,aF;tryaG=b(location.hash)catch(s)returnif(aG.length&&V.find(aG))if(aj.scrollTop()==0)aF=setInterval(function()if(aj.scrollTop()>0)Y(location.hash,true);b(document).scrollTop(aj.position().top);clearInterval(aF),50)elseY(location.hash,true);b(document).scrollTop(aj.position().top)function af()b("a.jspHijack").unbind("click.jsp-hijack").removeClass("jspHijack")function m()af();b("a[href^=#]").addClass("jspHijack").bind("click.jsp-hijack",function()var s=this.href.split("#"),aF;if(s.length>1)aF=s[1];if(aF.length>0&&V.find("#"+aF).length>0)Y("#"+aF,true);return false)b.extend(N,reinitialise:function(aF)aF=b.extend(,aF,au);an(aF),scrollToElement:function(aG,aF,s)Y(aG,aF,s),scrollTo:function(aG,s,aF)K(aG,aF);J(s,aF),scrollToX:function(aF,s)K(aF,s),scrollToY:function(s,aF)J(s,aF),scrollBy:function(aF,s,aG)N.scrollByX(aF,aG);N.scrollByY(s,aG),scrollByX:function(s,aG)var aF=ay()+s,aH=aF/(Q-ah);T(aH*j,aG),scrollByY:function(s,aG)var aF=aw()+s,aH=aF/(W-v);S(aH*i,aG),animate:function(aF,aI,s,aH)var aG=;aG[aI]=s;aF.animate(aG,duration:au.animateDuration,ease:au.animateEase,queue:false,step:aH),getContentPositionX:function()return ay(),getContentPositionY:function()return aw(),getIsScrollableH:function()return aB,getIsScrollableV:function()return av,getContentPane:function()return V,scrollToBottom:function(s)S(i,s),hijackInternalLinks:function()m())}f=b.extend(,b.fn.jScrollPane.defaults,f);var e;this.each(function()var g=b(this),h=g.data("jsp");if(h)h.reinitialise(f)elseh=new d(g,f);g.data("jsp",h)e=e?e.add(g):g);return e};b.fn.jScrollPane.defaults=showArrows:false,maintainPosition:true,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:10,arrowButtonSpeed:10,arrowRepeatFreq:100,arrowScrollOnHover:false,trackClickSpeed:30,trackClickRepeatFreq:100,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false})(jQuery,this);

//]]>

</script>

<script>

$(document).ready(function()

$('.scroll-pane').jScrollPane(showArrows: true);

);

</script>

2. Then locate this tag:

3. Finally search for the </body> and above it paste this:

Save the changes and that's all. In green you will see where you can change the scrollbar colors and its different areas, or add other styles, such as shadows, rounded corners, etc..

If you want the klimaks and bottom limits to not appear (as in the example) then remove what is in red.

Remember that the script uses jQuery, so if you already have it, then don't put the script again (the first line of code). If you are using Scriptaculous or Mootools, then you should make some slight changes in order to make it work.

Maybe the code might appear long but better add the scripts directly in the template, so the scripts will always be available and load faster. Regardless of all of this the end result is quite aesthetic, don't you think?

Begitulah penjelasan perihal Customize the scroll bar (scrollbar) with JScrollPane semoga info ini bermanfaat terima kasih

Artikel ini diposting pada tag widgets windows 7, widgets oppo, widgets cpu ram battery apk,