nicescroll滾動條插件兼容ie6+、手機、ipad。
首先我們在#content加入一定高度的内容。一定要出現滾動條，不然看不到效果。
<div id="content"> <h2>我們的特色</h2> <p>1、軟體+人工精心倣制。3個工作日内完成倣制</p> <p>2、文档歸類。圖片放在images文档夾，樣式css，特效js，字體fonts</p> <p>3、個人中心、需要登錄等頁面也可倣制</p> <p>4、html完美格式化。</p> ...... </div>
調用niceScroll 滾動條插件非常簡單：
$('#content').niceScroll({
cursorcolor: "#ccc",//#CC0071 光標顔色
cursoropacitymax: 1, //改變不透明度非常光標處於活動狀態（scrollabar“可見”狀態），範圍從1到0
touchbehavior: false, //使光標拖動滾動像在台式電腦觸摸設備
cursorwidth: "5px", //像素光標的寬度
cursorborder: "0", // 遊標邊框css定義
cursorborderradius: "5px",//以像素爲光標邊界半徑
autohidemode: false //是否隱藏滾動條
});當然我們也可以做整個頁面的滾動條，只要是設置body即可。
附一個jquery.nicescroll.js插件庫源代碼:
/* iframe script helper for jquery.nicescroll
-- version 0.9.0
-- copyright 2017-06-18 InuYaksa*2017
-- licensed under the MIT
--
-- https://nicescroll.areaaperta.com/
-- https://github.com/inuyaksa/jquery.nicescroll
--
*/
(function (document,window) {
var body = document.body;
var parent = window.parent;
if (parent && ("createEvent" in document)) {
var isoldie = ("documentMode" in document); // 11-
var ismsedge = ("msCredentials" in window); // MS Edge 14+
function onwheel(e) {
var evt = document.createEvent("MouseEvents");
evt.initEvent('wheel', true, true);
evt.deltaMode = e.deltaMode;
evt.deltaX = e.deltaX;
evt.deltaY = e.deltaY;
evt.deltaZ = e.deltaZ;
evt.wheelDelta = e.wheelDelta;
evt.wheelDeltaX = e.wheelDeltaX;
evt.wheelDeltaY = e.wheelDeltaY;
parent.dispatchEvent(evt);
}
body.addEventListener("wheel", onwheel);
}
if (window.addEventListener) {
// https://davidwalsh.name/add-rules-stylesheets
var sheet = (function () {
var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
return style.sheet;
})();
var tmrscroll = false;
var lastiframe = null;
var lastiframeviewport = null;
var lastscroll = [];
window.addEventListener("scroll", function (e) {
if (lastiframeviewport) {
// var df = [ window.scrollX - lastscroll[0], window.scrollY - lastscroll[1] ];
window.scrollTo(lastscroll[0], lastscroll[1]);
// lastiframeviewport.scrollBy(df[0],df[1]);
// console.log(df);
}
});
function findNiceParent(t) {
do {
if ($.data(t, '__nicescroll') !== undefined) return t;
t = t.parentNode || false;
} while (t);
return false;
}
window.addEventListener("load", function () {
var hasstyle = false;
$.nicescroll.each(function () {
var nice = this;
nice.scrollstart(function () {
if (!hasstyle) sheet.insertRule("iframe { pointer-events: none !important; }", 0);
hasstyle = true;
});
nice.scrollend(function () {
if (hasstyle) sheet.deleteRule(0);
hasstyle = false;
});
});
$("iframe").each(function () {
this.addEventListener("mouseenter", function (e) {
lastiframe = e.target;
var chk = findNiceParent(lastiframe);
lastiframeviewport = chk;
//if (chk) lastiframeviewport = $(chk).getNiceScroll();
lastscroll = [window.scrollX, window.scrollY];
});
this.addEventListener("mouseleave", function (e) {
lastiframe = lastiframeviewport = null;
});
});
});
}
})(document,window);
