轻量级、自定义美化滚动条插件,兼容IE浏览器(原创)

所属分类:UI-滚动

 29736  322  查看评论 (9)
分享到微信朋友圈
X
轻量级、自定义美化滚动条插件,兼容IE浏览器(原创) ie兼容8

更新时间:2018/1/10 下午4:19:45

更新说明:优化了鼠标按下状态,把鼠标移出滑块,依旧能滑动


更新时间:2017/12/29 上午9:24:19

更新说明:修改了scrollsXY(box)的X轴拖动最右的时候存在bug,参数写错了!


使用方法

第一步:引用scroll.min.js;

第二步:按照相应的结构,构造滚动区域;

第三步:

scrollY("#scrollbox");//单个Y轴
scrollsY(".scrollbox");//多个Y轴
scrollsX(".scrollXbox");//多个X轴
scrollsXY(".scrollXY");//多个XY轴

根据自身的项目的页面需求,可自行选择调用事件;

相关插件-滚动

JQuery滚动条插件jscroll.js

JQuery滚动条插件jscroll.js,支持火狐谷歌IE等主流浏览器,超轻量兼容好
  滚动
 40958  322

视觉滚动差效果

纯css3写的滚动视差效果
  滚动
 30976  357

jQuery滚动收缩导航

jQuery滚动收缩导航
  滚动
 36396  373

jQuery鼠标滚屏锚点定位

利用mousewheel库实现滚屏事件,同时支持侧边栏控制
  滚动
 31317  392

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

    …… 0
    2019/1/25 15:03:05
    按这个方法调用,滚动条有的出来,有的没出来
        强少1
        2019/8/21 17:39:49
        scrollsXY(".scrollXY");//多个XY轴 感谢交流!没有出来的话估计是我这个方法还有问题,有时间再尝试优化一下
    回复
    ??Me 0
    2018/11/16 15:25:27
    请问可以兼容IE浏览器吗 ?
        ??Me0
        2018/11/16 15:29:24
        样式可以兼容到 ie 浏览器吗?
        强少0
        2019/8/21 17:36:32
        可以兼容IE
    回复
    一夜梦醒 0
    2018/2/28 16:54:16
    如果滚动内容是可以直接编辑,例如div里加上contenteditable="true"之后,编辑的内容使得内容区域高度变化,那么滚动条就会超出容器范围之外
        强少0
        2018/3/21 10:06:06
        实际项目中有这样的需求的话,可以自己研究一下!可以从初始化重新构造滚动条入手考虑...
    回复
    小闰土 0
    2018/1/7 22:17:56

    鼠标按下状态  把鼠标移出滑块   就不能拉了

    体验不好

        强少0
        2018/1/10 16:21:37
        感谢交流!新版本已针对此交互优化
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复