jquery模拟滚动条(未封装)

所属分类:UI-滚动

 37469  339  查看评论 (11)
分享到微信朋友圈
X
jquery模拟滚动条(未封装) ie兼容10

更新时间: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")
相关插件-滚动

双向垂直上下滚动

垂直滚动插件,可切换向上或向下方向滚动。
  滚动
 46341  374

jquery模拟滚动条(未封装)

jquery模拟滚动条,支持自定义滚动条样式,兼容pad,web手机端未测试;支持同一网页多个滚动条;支持添加和删除(本人对封装不太了解,未封装)
  滚动
 37470  339

网站广播插件

网站发布消息的广播插件
  滚动
 39815  406

CSS3 滚动视觉差效果加返回顶部

CSS3 滚动视觉差效果+返回顶部.
  滚动
 41834  391

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    春暖花开 0
    2019/6/25 12:38:18
    为什么我的老是报错 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL> 我也百度了 解决办法 touch-action: none; 还是不管事呢?求指教
    回复
    mifen_oo 0
    2018/8/30 10:50:10
    调整横向滚动条不行啊,不起作用 回复
    我会发光光芒万丈i 0
    2018/1/14 21:40:39
    一个页面多个滚动条怎么不行呢 回复
    lemondreamtobe 0
    2017/11/20 16:35:43

    如何左右 上下都有滚动条

    回复
    枉生# 0
    2017/8/8 21:35:05

    为什么会出现夸域问题呢?怎么解决?

    回复
    Memory_LD 0
    2017/7/3 15:11:10
    怎么设置横向滚动条
        梅雪瑶香0
        2017/7/3 15:12:07

        修改wheelxory为wheelx

    回复
    luluniu 0
    2016/10/26 9:10:40
    xiexin1211 0
    2016/9/6 14:09:44
    阿PO 0
    2016/6/15 17:06:12
    Mary0904 0
    2015/11/18 15:11:52

    好用的插件,滚动条可以自己定义,很灵活

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复