jquery模拟滚动条（未封装）

 查看演示  website  立即下载

更新时间：2017/3/14 上午10:54:24

更新说明：

1. 全新封装插件；

2. 增加api及各项使用参数

3. 调用更加简单易用

4. 浏览器全面支持ie8+,chrome,firefox,移动端等

参数项：

$().shineonScroll({
    "father": "scrollfather1", //当前区域id
    "soncontent": "scrollson", //当前区域子元素样式表
    "scroll_y": "scroll_y", //模拟滚动条y轴背景样式
    "scroll_ymove": "scroll_ymove", //模拟滚动条y轴滚动条背景样式
    "scroll_x": "scroll_x", //模拟滚动条y轴背景样式
    "scroll_xmove": "scroll_xmove", //模拟滚动条x轴滚动条背景样式
    "deloradd": "", //添加元素，删除元素参数adddel
    "wheelxory": "wheely", //滚动类型wheelx轴，wheely轴
    "wheelval": 0, //滑轮上下滚动的值，1位向下，-1位向上
    "marginstep": 10, //步长,请使用数字，true为自动
    "getfatherid": "whichscroll", //获取当前滚动区域模块id的隐藏域id
    "scrolltop": "top",//top/bottom 初始化滚动条居顶、居底
    "resetinit": 0, //0代表不做处理，1代表重置 重置wheelx or wheely的left/top值
    "scrolltarget": ".scrollfather", //鼠标滑动，标记父元素
})

模拟滚动条

<div class="scrollfather" id="scrollfather1" >
    <div class="scrollson" >
    </div>
    <div class="scroll_ymove">
    <div class="scroll_y" unorbind="unbind"></div>
    </div>
    <div class="scroll_xmove">
    <div class="scroll_x" unorbind="unbind"></div>
    </div>
</div>

$().shineonScroll({"father":"scrollfather1"});

引入样式表和js即可；

需要注意的是，页面需要添加一行dom节点<input type="hidden" id="whichscroll">

页面初始化时需要添加一下代码，

$(".scrollson").mouseover(function() {
	//兼容pad的监听事件
	$("#whichscroll").val($.trim($(this).parent().attr("id"))) if ((navigator.userAgent.match(/(iPhone|Android|iPad)/i))) {
		var scrollfathter1 = document.getElementById($.trim($(this).parent().attr("id")));
		scrollfathter1.addEventListener("touchstart", touchStart, false);
		scrollfathter1.addEventListener("touchmove", touchMove, false);
		scrollfathter1.addEventListener("touchend", touchEnd, false);
	}
})
//初始化调用
scroll_y("scrollfather1", "scrollson", "scroll_y", "scroll_ymove", "scroll_x", "scroll_xmove", "", "wheely", "") $(".scrollson").css("margin-top", "0") $(".scroll_y").css("top", "0")

PREVIOUS:
NEXT:
可水平滚动水平时间轴插件
Jquery表格行全选反选