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);
