Sesuaikan Scroll Bar (Scrollbar) Dengan JScrollPane

0

JScrollPane adalah script jQuery yang memungkinkan Anda untuk mengubah scroll bar blog ', yaitu scrollbar peramban.
Meskipun kita dapat menggunakan CSS untuk mengubahnya, masalahnya adalah bahwa tidak standar, karena dengan CSS kita dapat membuatnya bekerja hanya pada Chrome dan Safari, dan dalam kasus Internet Explorerjuga memiliki kode sendiri tapi jelas itu hanya bekerja di browser (saya tidak tahu mana versi). Jadi apa yang akan kita lakukan adalah untuk memberikan tampilan baru untuk scrollbar tetapi dengan menggunakan jQuery, sehingga perubahan akan terlihat di semua browser.


Demonstrasi

Anda dapat melihat contoh dalam blog uji mana scroll bar memiliki bentuk yang berbeda dan warna.

Bagaimana mengubah scrollbar di Blogger

. 1 Pergi ke Template> Edit HTML dan sebelum </ head> paste kode ini:

<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; kanan: 0; width: 16px; height: 100%; background: # ccc;}
. JspHorizontalBar {position: absolute; bottom: 0; kiri: 0; width: 100%; height: 16px; background: # ccc;}
. JspVerticalBar *, jspHorizontalBar * {margin: 0; padding: 0;}.
. JspCap {display: none;} jspHorizontalBar jspCap {float: left;}..

. JspTrack {
background: # fff; / * warna latar belakang dari bar * /
position: relative;
}
. JspDrag {
background: # cc0000; / * Warna scrollbar * /
position: relative;
top: 0;
kiri: 0;
kursor: pointer;
}
. JspHorizontalBar. JspTrack,
. JspHorizontalBar. JspDrag {
float: left;
height: 100%;
}
. JspArrow {
background: # 888; / * Warna batas scrollbar * /
text-indent:-20000px;
display: block;
kursor: pointer;
}
. JspArrow.jspDisabled {
kursor: default;
background: # 333; / * Warna batas ketika srollbar yang menjangkau mereka * /
}
. 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)
* Izin dibawah Lisensi MIT (LICENSE.txt).
* Versi: 3.1.3
* /

(Function (pabrik) {
if (typeof mendefinisikan === 'function' && define.amd) {
define (['jquery'], pabrik);
} Else if (typeof ekspor === 'object') {
module.exports = pabrik;
} Else {
Globals / / Browser
pabrik (jQuery);
}
} (Function ($) {

var toFix = ['roda', 'roda mouse', 'DOMMouseScroll', 'MozMousePixelScroll'];
var toBind = 'onwheel' dalam dokumen | | document.documentMode> = 9?['Roda']: ['roda mouse', '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 ($. {
roda mouse: function (fn) {
kembali fn? this.bind ("roda mouse", fn): this.trigger ("mousewheel");
},

unmousewheel: function (fn) {
kembali this.unbind ("roda mouse", fn);
}
});

fungsi pengendali (event) {
var orgEvent = event | | window.event,
args = []. slice.call (argumen, 1),
delta = 0,
deltaX = 0,
deltaY = 0,
absDelta = 0,
absDeltaXY = 0,
fn;
event = $ event.fix (orgEvent).;
event.type = "mousewheel";
if (orgEvent.wheelDelta) {delta = orgEvent.wheelDelta;}
if (orgEvent.detail) {delta = orgEvent.detail * -1;}
if (orgEvent.deltaY) {
deltaY = orgEvent.deltaY * -1;
delta = deltaY;
}
if (orgEvent.deltaX) {
deltaX = orgEvent.deltaX;
delta = deltaX * -1;
}
if (orgEvent.wheelDeltaY == terdefinisi!) {deltaY = orgEvent.wheelDeltaY;}
if (orgEvent.wheelDeltaX == terdefinisi!) {deltaX = orgEvent.wheelDeltaX * -1;}
absDelta = Math.abs (delta);
jika | {lowestDelta = absDelta;} (lowestDelta | absDelta <lowestDelta!)
absDeltaXY = Math.max (Math.abs (deltaY), Math.abs (deltaX));
jika | {lowestDeltaXY = absDeltaXY;} (lowestDeltaXY | absDeltaXY <lowestDeltaXY!)
fn = delta> 0? 'Lantai': 'ceil';
delta = Math [fn] (delta / lowestDelta);
deltaX = Math [fn] (deltaX / lowestDeltaXY);
deltaY = Math [fn] (deltaY / lowestDeltaXY);
args.unshift (event, delta, deltaX, deltaY);
kembali (. $ event.dispatch | | $ event.handle.) menerapkan (ini, args).;
}
}));

/ *
* JScrollPane - v2.0.0beta5 - 2010-09-18
* Http://jscrollpane.kelvinluck.com/
* Copyright (c) 2010 Kelvin Keberuntungan
* Ganda berlisensi di bawah lisensi MIT dan GPL.
* /
(Function (b, a, c) {b.fn.jScrollPane = function (f) {fungsi d (C, L) {var "+ C.css (" paddingRight ") +" "+ C.css (" paddingBottom ") +" an (aH) {var class = "jspPane" /> '). membungkus (b (' <div class = "jspContainer" style = "width: 1px; position: relative;" 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" class = "jspArrow jspArrowUp" /> ') mengikat ("mousedown.jsp", az (0, -1)) bind ("click.jsp", kapak),. ac = b (.' <kelas = "jspArrow jspArrowDown "selectstart.jsp ", function () {return false}); ap.addClass (" jspActive "); var mouseleave.jsp ", ar); return false}); o ()}} 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", kapak),. x = b (' <a class = "jspArrow jspArrowRight ". /> ') mengikat (" mousedown.jsp ", az (1,0)) bind (." click.jsp ", kapak);
selectstart.jsp ", function () {return false}); h.addClass (" jspActive "); var mouseleave.jsp ", ar); return false}); l = aj.innerWidth (); ae ()} else {}} function E () {if (aB && av) {var class = "jspCorner"ai (aG, aI, aF, s) {var az (aF, s, aG) {kembali fungsi () {G (aF, s, ini, aG); this.blur (); return false}} function G (aH, aF, aK, Aj) {aK = b . (aK) addClass ("jspActive"); var aG = b (ini), s = setInterval (function () {var aG = b (ini), s = setInterval (function () {var false}})}} function w () {F && F.unbind ("mousedown.jsp"); memperlonggar ("dragstart al && al.unbind (" mousedown.jsp ")} function ar () {b (" html ").. jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp "); ap && ap.removeClass (" jspActive "), h && h.removeClass (" jspActive ")} function aa (aF) {if (aF == c) {aF = ap.position () atas} aj.scrollTop (0);. H = aF; var ab (aF) {if (aF == c) {aF = h.position () kiri} 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 (aF, s) {var aG = aF / (Q-ah), T (aG * j, s)} function Y (aN, aL, aF) {var ay () {return-V.position (). kiri} function aw () {return-V.position () atas.} ad function () {aj.unbind (Z) mengikat. (Z, fungsi (aI, Aj , aH, aF) {var aG = X, s = H, T (X + aH * au.mouseWheelSpeed, false); S (H-aF * au.mouseWheelSpeed, false); kembali aG == X == && s H} )} function n () {aj.unbind (Z)} function kapak () {return false} function 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; Kasus 38: S (H-aI, false); istirahat , kasus 34: Kasus 32: J (aw () + Math.max (32, v) -16); break; Kasus 33: J (aw ()-v +16); break; Kasus 35: J (Wv) ; break; Kasus 36: J (0); break; Kasus 39: T (X + aI, false); break; kasusfalse}}); if (au.hideFocus) {C.css ("garis", "tidak ada"); if ("hideFocus" di aj [0]) {C.attr ("hideFocus", true)}} else {C.css ("garis", ""); if ("hideFocus" di aj [0]) {C.attr ("hideFocus", false)}}} function O () {C.attr ("tabindex" , "-1"). removeAttr ("tabindex"). memperlonggar ("keydown.jsp")} function B () {if (location.hash && location.hash.length> 1) {varaf () {b ("a.jspHijack") memperlonggar ("click.jsp-membajak") removeClass ("jspHijack")..} function m () {af (); b ("a [href ^ = #] "). addClass (" jspHijack ") bind (." click.jsp-pembajakan ", function () {var aF = ay () + s, aH = aF / (Q-ah), T (aH * j, aG)}, scrollByY: function (s, aG) {var aF = aw () + s, aH = aF / (Wv); S (aH * i, aG)}, bernyawa: function (aF, aI, s, aH) {var ay ()}, getContentPositionY: function () {return aw ()}, getIsScrollableH: function () {return aB}, getIsScrollableV: function () {return av}, getContentPane: function () {return e; this.each (function () {var g = b (ini), h = g.data ("jsp"), jika (h) {h.reinitialise (f)} else {h = d baru (g, f); g.data ("jsp", h)} e = e e.add (g):? g}); kembali
/ /]]>
</ Script>

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

. 2 Kemudian cari tag ini:

 <body>

Atau baris ini:

 <body expr:class='"loading" + data:blog.mobileClass'>

Di bawah salah satu dari dua menambahkan ini:

 <div class='scroll-pane' id='blog-container'>

. 3 Akhirnya mencari </ body> dan di atasnya paste ini:

 </ Div>

Simpan perubahan dan itu saja. Dalam hijau Anda akan melihat di mana Anda dapat mengubah warna scrollbar dan daerah yang berbeda, atau menambahkan gaya lain, seperti bayangan, sudut membulat, dll.
Jika Anda ingin batas atas dan bawah untuk tidak muncul (seperti pada contoh) kemudian menghapus apa yang ada di merah.

Ingat bahwa script menggunakan jQuery, jadi jika Anda sudah memilikinya, maka jangan menempatkan script lagi (baris pertama kode). Jika Anda menggunakan Scriptaculous atau Mootools, maka Anda harus membuat beberapa perubahan kecil dalam rangka untuk membuatnya bekerja.

Mungkin kode mungkin tampak panjang tapi lebih baik tambahkan script langsung dalam template, sehingga script akan selalu tersedia dan memuat lebih cepat. Terlepas dari semua ini hasil akhirnya cukup estetika, bukankah begitu?