Como personalizar a barra de rolagem
Autor: Priscila | Publicado: 2013-06-08T14:45:00-03:00


JScrollPane&nbsp;é um script jQuery que&nbsp;permite&nbsp;que você&nbsp;mude a barra de rolagem do blog,&nbsp;ou seja,a barra de rolagem do navegador.&nbsp;Você pode ver um exemplo de&nbsp;teste deste blog&nbsp;, você vai ver que a barra de rolagem tem uma forma e cor diferente.&nbsp;Para&nbsp;alterar a barra de rolagem para seu blog&nbsp;entre primeiro&nbsp;Modelo&nbsp;| Editar HTML&nbsp;e antes de&nbsp;&lt;/ head&gt;&nbsp;cole o seguinte código:

src = "/ / ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js '&lt;script type='text/javascript'/&gt;&nbsp;&lt;style&gt;&nbsp;. JspContainer {overflow: hidden, position: relative;}. JspPane {position: absolute;}&nbsp;. JspVerticalBar {position: absolute, top: 0; direita: 0, width: 16px, height: 100%; background: # ccc;}&nbsp;. JspHorizontalBar {position: absolute, bottom: 0, left: 0, width: 100% altura: 16px; background: # ccc;}&nbsp;. JspVerticalBar * JspHorizontalBar *. {Margin: 0, padding: 0;}&nbsp;. JspCap {display: none;}.. JspHorizontalBar JspCap {float: left;}&nbsp;. JspTrack {&nbsp;background: # dae,&nbsp;/ * Cor barra fundo * /&nbsp;position: relative;&nbsp;}&nbsp;. JspDrag {&nbsp;background: # BBD;&nbsp;/ * Cor do botão de rolagem * /&nbsp;position: relative;&nbsp;top: 0;&nbsp;left: 0;&nbsp;cursor: pointer;&nbsp;}&nbsp;. JspHorizontalBar. JspTrack,&nbsp;. JspHorizontalBar. JspDrag {&nbsp;float: left;&nbsp;altura: 100%;&nbsp;}&nbsp;. JspArrow {&nbsp;background: # 50506d&nbsp;/ * Cor dos limites * /&nbsp;text-indent:-20000px;&nbsp;display: block;&nbsp;cursor: pointer;&nbsp;}&nbsp;. JspArrow.jspDisabled {&nbsp;cursor: default;&nbsp;background: # 80808d&nbsp;/ * Cor de limites quando o botão de alcança-los * /&nbsp;}&nbsp;. JspVerticalBar. JspArrow {&nbsp;height: 16px;&nbsp;}&nbsp;. JspHorizontalBar. JspArrow {&nbsp;width: 16px;&nbsp;float: left;&nbsp;altura: 100%;&nbsp;}&nbsp;.. JspVerticalBar JspArrow: foco. {Outline: none;} JspCorner {background: # eeeef4; float: left; height: 100%;}. * Html JspCorner {margin: 0-3px 0 0;}&nbsp;html, body {&nbsp;altura: 100%;&nbsp;margin: 0;&nbsp;padding: 0;&nbsp;}&nbsp;# Blog-container {&nbsp;altura: 100%;&nbsp;margin: 0;&nbsp;padding: 0;&nbsp;overflow: auto;&nbsp;}&nbsp;&lt;/ Style&gt;&nbsp;&lt;script&gt;&nbsp;/ / &lt;! [CDATA [&nbsp;/ *!&nbsp;Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net)&nbsp;* Licenciado sob a licença MIT (LICENSE.txt).&nbsp;* Versão: 3.1.3&nbsp;* /&nbsp;(Function (fábrica) {&nbsp;if (typeof definir === 'função' &amp;&amp; define.amd) {&nbsp;define (['jquery'], de fábrica);&nbsp;} Else if (typeof exportações === 'objeto') {&nbsp;module.exports = fábrica;&nbsp;Else {}&nbsp;/ / Globals Navegador&nbsp;fábrica (jQuery);&nbsp;}&nbsp;} (Function ($) {&nbsp;TOFIX var = ['roda', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'];&nbsp;toBind var = 'onwheel' no documento | | document.documentMode&gt; = 9?&nbsp;['Roda']: ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];&nbsp;var lowestDelta, lowestDeltaXY;&nbsp;if ($. event.fixHooks) {&nbsp;for (var i = toFix.length, i ;) {&nbsp;$ Event.fixHooks [TOFIX - [i]] = $ Event.mouseHooks..;&nbsp;}&nbsp;}&nbsp;$. Event.special.mousewheel = {&nbsp;setup: function () {&nbsp;if (this.addEventListener) {&nbsp;for (var i = toBind.length, i ;) {&nbsp;this.addEventListener (toBind [- i], manipulador, false);&nbsp;}&nbsp;Else {}&nbsp;this.onmousewheel = manipulador;&nbsp;}&nbsp;}&nbsp;desmontagem: function () {&nbsp;if (this.removeEventListener) {&nbsp;for (var i = toBind.length, i ;) {&nbsp;this.removeEventListener (toBind [- i], manipulador, false);&nbsp;}&nbsp;Else {}&nbsp;this.onmousewheel = null;&nbsp;}&nbsp;}&nbsp;};&nbsp;$. Fn.extend ({&nbsp;mousewheel: function (fn) {&nbsp;voltar fn?&nbsp;this.bind ("mousewheel", fn): this.trigger ("mousewheel");&nbsp;}&nbsp;unmousewheel: function (fn) {&nbsp;retorno this.unbind ("mousewheel", fn);&nbsp;}&nbsp;});&nbsp;handler function (event) {&nbsp;orgEvent var = evento | | window.event,&nbsp;args = []. slice.call (argumentos, 1),&nbsp;delta = 0&nbsp;deltaX = 0&nbsp;deltaY = 0&nbsp;absDelta = 0&nbsp;absDeltaXY = 0&nbsp;fn;&nbsp;. evento = $ event.fix (orgEvent);&nbsp;event.type = "mousewheel";&nbsp;if (orgEvent.wheelDelta) {delta = orgEvent.wheelDelta;}&nbsp;if (orgEvent.detail) orgEvent.detail * {ô = 1;}&nbsp;if (orgEvent.deltaY) {&nbsp;orgEvent.deltaY deltaY * = -1;&nbsp;delta = deltaY;&nbsp;}&nbsp;if (orgEvent.deltaX) {&nbsp;deltaX = orgEvent.deltaX;&nbsp;* DeltaX delta = -1;&nbsp;}&nbsp;if (orgEvent.wheelDeltaY == indefinido!) {deltaY = orgEvent.wheelDeltaY;}&nbsp;if (orgEvent.wheelDeltaX == indefinido!) {deltaX orgEvent.wheelDeltaX * = -1;}&nbsp;absDelta = Math.abs (delta);&nbsp;if (lowestDelta | | absDelta &lt;lowestDelta!) {lowestDelta = absDelta;}&nbsp;absDeltaXY = Math.max (Math.abs (deltaY), Math.abs (deltaX));&nbsp;se | {lowestDeltaXY = absDeltaXY;} (lowestDeltaXY | absDeltaXY &lt;lowestDeltaXY!)&nbsp;fn = delta&gt; 0?&nbsp;'Chão', 'ceil';&nbsp;delta = Math [fn] (delta / lowestDelta);&nbsp;deltaX = Math [fn] (deltaX / lowestDeltaXY);&nbsp;deltaY = Math [fn] (deltaY / lowestDeltaXY);&nbsp;args.unshift (evento, delta, deltaX, deltaY);&nbsp;. retorno (.. $ event.dispatch | | $ event.handle) aplicam-se (este, args);&nbsp;}&nbsp;}));&nbsp;/ *&nbsp;* JScrollPane - v2.0.0beta5 - 2010-09-18&nbsp;* Http :/ / jscrollpane.kelvinluck.com /&nbsp;* Copyright (c) 2010 Kelvin Sorte&nbsp;* Dupla licenciado sob as licenças MIT e GPL.&nbsp;* /&nbsp;(Função (b, a, c) {b.fn.jScrollPane = function (f) {function d (C, L) {var&nbsp;"+ C.css (" paddingRight ") +" "+ C.css (" paddingBottom ") +"&nbsp;um (Ah) {var&nbsp;class = "jspPane" /&gt; '). wrap (b (' &lt;div class = "jspContainer"&nbsp;style = "width: 1px; position: relative;"&nbsp;BC () {if (v) {aj.append (b ('&lt;div class="jspVerticalBar" /&gt;'). Append (b ('&lt;div class="jspCap jspCapTop" /&gt;'), b ('&lt; div class = "jspTrack" /&gt; '). append (b (' &lt;div class="jspDrag" /&gt; '). append (b (' &lt;div class="jspDragTop" /&gt; '), b (' &lt;div class = "jspDragBottom" /&gt; '))), b (' &lt;div class = "jspCap jspCapBottom"&nbsp;class = "jspArrow jspArrowUp" /&gt; ') bind ("mousedown.jsp" az (0, -1)) bind ("click.jsp", x);.. ac = b (' &lt;a class = "jspArrow jspArrowDown "&nbsp;selectstart.jsp ", function () {return false}); ap.addClass (" jspActive ") var&nbsp;mouseleave.jsp "ar) return false}) ou ()}} function&nbsp;z () {if (aB) {aj.append (b ('&lt;div class="jspHorizontalBar" /&gt;'). append (b ('&lt;div class="jspCap jspCapLeft" /&gt;'), b ('&lt; div class = "jspTrack" /&gt; '). append (b (' &lt;div class="jspDrag" /&gt; '). append (b (' &lt;div class="jspDragLeft" /&gt; '), b (' &lt;div class = "jspDragRight" /&gt; '))), b (' &lt;div class = "jspCap jspCapRight"&nbsp;class = "jspArrow jspArrowLeft" /&gt; ') bind ("mousedown.jsp" az (-1,0)) bind ("click.jsp", x);.. x = b (' &lt;a class = "jspArrow jspArrowRight. "/&gt; ') bind (" mousedown.jsp "az (1.0)) bind (". click.jsp ", x);&nbsp;selectstart.jsp ", function () {return false}); h.addClass (" jspActive ") varmouseleave.jsp ", ar) return false}); l = aj.innerWidth () e ()} else {}} function&nbsp;E () {if (aB &amp;&amp; v) {var&nbsp;class = "jspCorner"&nbsp;ai (aG, AI, AF, s) {var&nbsp;az (FA, s, aG) {função return () {G (FA, s, isso, aG); this.blur () return false}} function G (ah, aF, AK, AJ) {aK = b (AK). addClass ("jspActive") var&nbsp;aG = b (this), s = setInterval (function () {varaG = b (this), s = setInterval (function () {var&nbsp;false}})}} function w () {F &amp;&amp; F.unbind ("mousedown.jsp"), o &amp;&amp; al.unbind ("mousedown.jsp")} function r () {b ("html"). desvincular ("dragstart. mouseup.jsp mousemove.jsp jsp mouseleave.jsp selectstart.jsp ") &amp;&amp; ap ap.removeClass (" jspActive função ") &amp;&amp; h h.removeClass (" jspActive ")}&nbsp;aa (FA) {if (aF == c) {aF = ap.position (). top} aj.scrollTop (0), H = aF, var&nbsp;ab (FA) {if (aF == c) {aF = POSICAO H (). left} aj.scrollTop (0), X = aF, var&nbsp;r (aF, s) {if (au.showArrows) {at [aF "addClass":? "removeClass"] ("jspDisabled");&nbsp;x [? s "addClass": "removeClass"] ("jspDisabled")}} function J (s, aF) {var aG = s / (WV), S (aG * i, AF)} function K (FA, s) {var aG = aF / (Q-ah), G (aG * j, s)} function Y (aN, Al, AF) {var&nbsp;y () {return-V.POSITION (). esquerda w} function () {return-V.POSITION (). top} function anúncio () {aj.unbind (Z). bind (Z, function (aI, aJ , ah, aF) {var aG = X, s = H, T (X + aH * au.mouseWheelSpeed, false), S (H-f * au.mouseWheelSpeed, false) retorno aG &amp;&amp; s == X == H} )} function {return false} função n () {} function aj.unbind (Z) x ()&nbsp;D () {V.unbind ("focusin.jsp")} function P () {var&nbsp;AH = X, aG = H, aI = aF 2:16; switch (aJ.keyCode) {case 40:? S (H + aI, false) break; caso 38: S (H-aI, false); pausa , caso 34, caso 32: J (aw () + Math.max (32, v) -16) break; caso 33: J (aw ()-v 16) break; caso 35: J (WV) break; caso 36: J (0) break; caso 39: T (X + aI, false) break; caso&nbsp;false}}) if (au.hideFocus) {C.css ("esboço", "none") if ("hideFocus" em j [0]) {C.attr ("hideFocus", true)}} else {C.css ("esboço", "") if ("hideFocus" em j [0]) {C.attr ("hideFocus", false)}}} function O () {C.attr ("tabindex" , "-1"). removeAttr ("tabindex"). desvincular ("keydown.jsp")} function B () {if (location.hash &amp;&amp; location.hash.length&gt; 1) {var&nbsp;f () {b ("a.jspHijack"). desvincular ("click.jsp-sequestro"). removeClass ("jspHijack")} function m () {f () b ("a [href ^ = #] "). addClass (" jspHijack. ") bind (" click.jsp-sequestro ", function () {varaF = ay () + s, ah = aF / (Q-ah), T (* j ah, aG)}, scrollByY: function (s, aG) {var aF = aw () + s, ah = aF / (WV), S (* i ah, aG)}, anime-se: function (aF, ai, s, ah) {var&nbsp;y ()}, getContentPositionY: function () {return w ()}, getIsScrollableH: function () {return} aB, getIsScrollableV: function () {return av}, getContentPane: function () {return&nbsp;e; this.each (function () {var g = b (this), h = g.data ("jsp") if (h) {h.reinitialise (f)} else {h = new d (g, ? f); g.data ("JSP", h)} E = E e.add (g): g}) de regresso&nbsp;/ /]]&gt;&nbsp;&lt;/ Script&gt;&nbsp;&lt;script&gt;&nbsp;$ (Document). Ready (function () {&nbsp;$ ('Scroll-painel.') JScrollPane&nbsp;({showArrows: true}).;&nbsp;});&nbsp;&lt;/ Script&gt;



Em seguida, procure pelo código:
&lt;body&gt;
Ou por esta linha:
&lt;body expr:class='"loading" + data:blog.mobileClass'&gt;
Em qualquer um destes dois acrescente o seguinte:
&lt;div class='scroll-pane' id='blog-container'&gt;
Finalmente, olhando para o&nbsp;&lt;/ body&gt;&nbsp;e acima dele cole o seguinte:
&lt;/ Div&gt;

Salve as alterações e pronto.&nbsp;No verde, você vai ver onde você muda as cores da barra de rolagem e suas diferentes áreas, tais como CSS pode adicionar outros estilos, como desejado, somo sombras, cantos arredondados, etc.