sábado, 8 de junho de 2013

Como personalizar a barra de rolagem



JScrollPane é um script jQuery que permite que você mude a barra de rolagem do blog, ou seja,a barra de rolagem do navegador. 

Você pode ver um exemplo de teste deste blog , você vai ver que a barra de rolagem tem uma forma e cor diferente. 

Para alterar a barra de rolagem para seu blog entre primeiro Modelo | Editar HTML e antes de </ head> cole o seguinte código:

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

<style> 
. JspContainer {overflow: hidden, position: relative;}. JspPane {position: absolute;} 
. JspVerticalBar {position: absolute, top: 0; direita: 0, width: 16px, height: 100%; background: # ccc;} 
. JspHorizontalBar {position: absolute, bottom: 0, left: 0, width: 100% altura: 16px; background: # ccc;} 
. JspVerticalBar * JspHorizontalBar *. {Margin: 0, padding: 0;} 
. JspCap {display: none;}.. JspHorizontalBar JspCap {float: left;} 

. JspTrack { 
background: # dae, / * Cor barra fundo * / 
position: relative; 
} 
. JspDrag { 
background: # BBD; / * Cor do botão de rolagem * / 
position: relative; 
top: 0; 
left: 0; 
cursor: pointer; 
} 
. JspHorizontalBar. JspTrack, 
. JspHorizontalBar. JspDrag { 
float: left; 
altura: 100%; 
} 
. JspArrow { 
background: # 50506d / * Cor dos limites * / 
text-indent:-20000px; 
display: block; 
cursor: pointer; 
} 
. JspArrow.jspDisabled { 
cursor: default; 
background: # 80808d / * Cor de limites quando o botão de alcança-los * / 
} 
. JspVerticalBar. JspArrow { 
height: 16px; 
} 
. JspHorizontalBar. JspArrow { 
width: 16px; 
float: left; 
altura: 100%; 
} 
.. JspVerticalBar JspArrow: foco. {Outline: none;} JspCorner {background: # eeeef4; float: left; height: 100%;}. * Html JspCorner {margin: 0-3px 0 0;} 
html, body { 
altura: 100%; 
margin: 0; 
padding: 0; 
} 
# Blog-container { 
altura: 100%; 
margin: 0; 
padding: 0; 
overflow: auto; 
} 
</ Style> 
<script> 
/ / <! [CDATA [ 
/ *! Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net) 
* Licenciado sob a licença MIT (LICENSE.txt). 
* Versão: 3.1.3 
* / 

(Function (fábrica) { 
if (typeof definir === 'função' && define.amd) { 
define (['jquery'], de fábrica); 
} Else if (typeof exportações === 'objeto') { 
module.exports = fábrica; 
Else {} 
/ / Globals Navegador 
fábrica (jQuery); 
} 
} (Function ($) { 

TOFIX var = ['roda', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll']; 
toBind var = 'onwheel' no documento | | document.documentMode> = 9? ['Roda']: ['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], manipulador, false); 
} 
Else {} 
this.onmousewheel = manipulador; 
} 
} 

desmontagem: function () { 
if (this.removeEventListener) { 
for (var i = toBind.length, i ;) { 
this.removeEventListener (toBind [- i], manipulador, false); 
} 
Else {} 
this.onmousewheel = null; 
} 
} 
}; 

$. Fn.extend ({ 
mousewheel: function (fn) { 
voltar fn? this.bind ("mousewheel", fn): this.trigger ("mousewheel"); 
} 

unmousewheel: function (fn) { 
retorno this.unbind ("mousewheel", fn); 
} 
}); 

handler function (event) { 
orgEvent var = evento | | window.event, 
args = []. slice.call (argumentos, 1), 
delta = 0 
deltaX = 0 
deltaY = 0 
absDelta = 0 
absDeltaXY = 0 
fn; 
. evento = $ event.fix (orgEvent); 
event.type = "mousewheel"; 
if (orgEvent.wheelDelta) {delta = orgEvent.wheelDelta;} 
if (orgEvent.detail) orgEvent.detail * {ô = 1;} 
if (orgEvent.deltaY) { 
orgEvent.deltaY deltaY * = -1; 
delta = deltaY; 
} 
if (orgEvent.deltaX) { 
deltaX = orgEvent.deltaX; 
* DeltaX delta = -1; 
} 
if (orgEvent.wheelDeltaY == indefinido!) {deltaY = orgEvent.wheelDeltaY;} 
if (orgEvent.wheelDeltaX == indefinido!) {deltaX orgEvent.wheelDeltaX * = -1;} 
absDelta = Math.abs (delta); 
if (lowestDelta | | absDelta <lowestDelta!) {lowestDelta = absDelta;} 
absDeltaXY = Math.max (Math.abs (deltaY), Math.abs (deltaX)); 
se | {lowestDeltaXY = absDeltaXY;} (lowestDeltaXY | absDeltaXY <lowestDeltaXY!) 
fn = delta> 0? 'Chão', 'ceil'; 
delta = Math [fn] (delta / lowestDelta); 
deltaX = Math [fn] (deltaX / lowestDeltaXY); 
deltaY = Math [fn] (deltaY / lowestDeltaXY); 
args.unshift (evento, delta, deltaX, deltaY); 
. retorno (.. $ event.dispatch | | $ event.handle) aplicam-se (este, args); 
} 
})); 

/ * 
* JScrollPane - v2.0.0beta5 - 2010-09-18 
* Http :/ / jscrollpane.kelvinluck.com / 
* Copyright (c) 2010 Kelvin Sorte 
* Dupla licenciado sob as licenças MIT e GPL. 
* / 
(Função (b, a, c) {b.fn.jScrollPane = function (f) {function d (C, L) {var "+ C.css (" paddingRight ") +" "+ C.css (" paddingBottom ") +" um (Ah) {var class = "jspPane" /> '). wrap (b (' <div class = "jspContainer" style = "width: 1px; position: relative;" BC () {if (v) {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" class = "jspArrow jspArrowUp" /> ') bind ("mousedown.jsp" az (0, -1)) bind ("click.jsp", x);.. ac = b (' <a class = "jspArrow jspArrowDown " selectstart.jsp ", function () {return false}); ap.addClass (" jspActive ") var mouseleave.jsp "ar) return false}) ou ()}} 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" class = "jspArrow jspArrowLeft" /> ') bind ("mousedown.jsp" az (-1,0)) bind ("click.jsp", x);.. x = b (' <a class = "jspArrow jspArrowRight. "/> ') bind (" mousedown.jsp "az (1.0)) bind (". click.jsp ", x); 
selectstart.jsp ", function () {return false}); h.addClass (" jspActive ") varmouseleave.jsp ", ar) return false}); l = aj.innerWidth () e ()} else {}} function E () {if (aB && v) {var class = "jspCorner" ai (aG, AI, AF, s) {var 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 aG = b (this), s = setInterval (function () {varaG = b (this), s = setInterval (function () {var false}})}} function w () {F && F.unbind ("mousedown.jsp"), o && al.unbind ("mousedown.jsp")} function r () {b ("html"). desvincular ("dragstart. mouseup.jsp mousemove.jsp jsp mouseleave.jsp selectstart.jsp ") && ap ap.removeClass (" jspActive função ") && h h.removeClass (" jspActive ")} aa (FA) {if (aF == c) {aF = ap.position (). top} aj.scrollTop (0), H = aF, var ab (FA) {if (aF == c) {aF = POSICAO H (). left} aj.scrollTop (0), X = aF, var r (aF, s) {if (au.showArrows) {at [aF "addClass":? "removeClass"] ("jspDisabled"); 
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 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 && s == X == H} )} function {return false} função n () {} function aj.unbind (Z) x () D () {V.unbind ("focusin.jsp")} function P () {var 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 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 && location.hash.length> 1) {var 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 y ()}, getContentPositionY: function () {return w ()}, getIsScrollableH: function () {return} aB, getIsScrollableV: function () {return av}, getContentPane: function () {return 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 
/ /]]> 
</ Script> 

<script> 
$ (Document). Ready (function () { 
$ ('Scroll-painel.') JScrollPane ({showArrows: true}).; 
}); 
</ Script>



Em seguida, procure pelo código:
<body>
Ou por esta linha:
<body expr:class='"loading" + data:blog.mobileClass'>
Em qualquer um destes dois acrescente o seguinte:
<div class='scroll-pane' id='blog-container'>
Finalmente, olhando para o </ body> e acima dele cole o seguinte:
</ Div>
Salve as alterações e pronto. 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.


1 comentários:

AlexJ disse...

grande informação e ótimo tutorial.

Eu uso uma parte do que o script, e ele funciona muito bem no meu site

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...