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>
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.
grande informação e ótimo tutorial.
ResponderExcluirEu uso uma parte do que o script, e ele funciona muito bem no meu site