jQuery自定义滚动条插件

所属分类:UI-滚动

 8997  55  查看评论 (1)
分享到微信朋友圈
X
jQuery自定义滚动条插件 ie兼容6

更新时间:2021-03-07 22:40:47

使用方法

1、引用js   

<script src="http://www.jq22.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.nicescroll.js"></script>

2、html

<div class="content longitudinal">
    <ul>
        <li>jQuery是一个快速、简洁的JavaScript框架</li>
        <li>jQuery的核心特性可以总结为</li>
        <li>具有独特的链式语法和短小清晰的多功能接口</li>
        <li>具有高效灵活的css选择器</li>
        <li>并且可对CSS选择器进行扩展</li>
        <li>拥有便捷的插件扩展机制和丰富的插件</li>
        <li>jQuery兼容各种主流浏览器</li>
        <li>它封装JavaScript常用的功能代码</li>
    </ul>
</div>

3、页面配置js           

$('.longitudinal').niceScroll({
    cursorcolor: "#ccc", //#CC0071 光标颜色
    cursoropacitymax: 1, //改变不透明度非常光标处于活动状态(scrollabar“可见”状态),范围从1到0
    touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
    cursorwidth: "5px", //像素光标的宽度
    cursorborder: "0", // 	游标边框css定义
    cursorborderradius: "5px", //以像素为光标边界半径
    autohidemode: false //是否隐藏滚动条
});
相关插件-滚动

jQuery无缝滚动信息牌滚动(原创)

无缝滚动,可以向上滚动和向左滚动,可以使用固定格式滚动,也可以是无固定格式滚动,文字图片都可以实现滚动
  滚动
 41543  375

jquery模拟滚动条(未封装)

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

jQueryScrollPage单页全屏滚动效果

漂亮的jQuery单页全屏滚动,带视差效果
  滚动
 35718  392

jQuery美化滚动条插件mCustomScrollbar

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

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

    丨淘??态丿 0
    2022/4/7 16:25:48
    切换页面会出现白屏
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复