jQuery纵向滚动条(原创)

所属分类:UI-滚动

 43897  334  查看评论 (12)
分享到微信朋友圈
X
jQuery纵向滚动条(原创) ie兼容9

更新时间:2017/8/29 上午11:29:14

更新说明:滚动的样式做了一些改动,同时支持实例化传入样式参数,调用方法由原来的单元素调用改为支持多个元素一次调用,滚动条的滚动自适应优化调整,新加了与浏览器默认滚动的兼容处理


使用方法

$("#id").xb_scroll();//实例化对向

可传入参数:

{
    "speed": 25,
    "isMaxHeight": false,
    "barOffTop": 2,
    "barOffBottom": 2,
    "barOffRight": 2,
    "boxWidth": 10,
    "barWidth": 10,
    "childPanel": "._panel-box",
    "boxClass": "_scroll_box",
    "barClass": "_scroll_bar"
}

没有特殊要求可不用传入、修改相关参数,对于容器使用了max-heihgt必穿参数{"isMaxHeight":true},见demo

相关插件-滚动

jQuery美化滚动条插件mCustomScrollbar

mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义
  滚动
 33561  335

js美化div滚动条并兼容IE8

js美化div滚动条并兼容IE8
  滚动
 63454  521

简洁的jQuery滚动条插件scrollBar.js

本插件会将容器中滚动条样式进行统一,通过修改css任意改变滚动条的宽度与颜色,实现自定义滚动条的目的。
  滚动
 63246  383

jQuery元素滚动监听插件xRoll.js

xRoll.js 元素滚动监听插件 元素出现在窗口的时候在执行自定义的函数
  滚动
 24543  324

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

    XJTM 0
    2020/10/21 15:37:06

    咋监听子元素高度变化的。用div仿textarea  --->

    <div contenteditable= "true" >
         .....此处省略.....
    </div>咋获取纯文字的高度?
    回复
    L 0
    2018/9/14 10:30:50
    统一回复,因插件无法删除,且开发了新的东西,之前的代码已抛弃,请各位查看本人新的插件 leojs (10jq币,审核中) 下载过本人之前插件的老铁如果需要新的leojs 可留言留下邮箱,我会发到各位需要的老铁邮箱,谢谢支持。 回复
    √呵呵 0
    2018/4/13 17:49:57
    _panel-box这个class必须得用?我去 对于别人没啥实际用处,很多代码别人是用不到的
        L0
        2018/9/14 10:45:14
        谢谢老铁支持、之前做的东西确实有很多问题
        本人新的插件leojs已更新新的滚动条,目前leojs在审核中,若亲想预览,可以查看https://tianwenfei.cn/leojs/
        望亲给出更多建议,谢谢
    回复
    闭眼〆聆聽心碎dé寂寥 0
    2017/12/26 9:23:44

    在图片轮播(我用的是swiper插件)某一块中用到这插件会出现BUG 一开始会没有作用 反复几次后才会有作用 一会又没作用了 这个得怎么改

    回复
    承诺 0
    2017/8/25 16:15:27

    在vue中怎么使用

    回复
    上善若水 0
    2017/6/12 16:00:34
    还有一个问题就是当鼠标移出当前滚动区域的时候  滚动条要消失 回复
    上善若水 0
    2017/6/12 15:42:45

    还必须得用_panel-box 这个class,,负责就不出现滚动条,,还有就是滚动条的行间样式太丑,更改麻烦

        L0
        2017/6/12 16:14:41

        感谢的你的反馈,现在已经做了些修改,没时间放上去,好不意思

    回复
    雨萱 0
    2017/4/6 14:45:18
    高度缩小,就拉不到最下面 回复
      S, 0
    2017/3/29 12:33:34
    1245835022 0
    2017/3/28 12:33:23
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复