漂亮的虚拟滚动条

所属分类:UI,输入,其他-滚动,定制和风格,浏览器调整,独立的部件

 42157  322  查看评论 (18)
漂亮的虚拟滚动条 ie兼容6

Basic configuration

 $(selector).slimScroll();

Example of additional settings

$(function() {
    $(".slimscroll").slimScroll({
        width: 'auto', //可滚动区域宽度
        height: '100%', //可滚动区域高度
        size: '10px', //组件宽度
        color: '#000', //滚动条颜色
        position: 'right', //组件位置:left/right
        distance: '0px', //组件与侧边之间的距离
        start: 'top', //默认滚动位置:top/bottom
        opacity: .4, //滚动条透明度
        alwaysVisible: true, //是否 始终显示组件
        disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件,离开时隐藏组件
        railVisible: true, //是否 显示轨道
        railColor: '#333', //轨道颜色
        railOpacity: .2, //轨道透明度
        railDraggable: true, //是否 滚动条可拖动
        railClass: 'slimScrollRail', //轨道div类名 
        barClass: 'slimScrollBar', //滚动条div类名
        wrapperClass: 'slimScrollDiv', //外包div类名
        allowPageScroll: true, //是否 使用滚轮到达顶端/底端时,滚动窗口
        wheelStep: 20, //滚轮滚动量
        touchScrollStep: 200, //滚动量当用户使用手势
        borderRadius: '7px', //滚动条圆角
        railBorderRadius: '7px' //轨道圆角
    });
});

Events

slimScroll publishes slimscroll event when scrollbar reaches top or bottom of the parent container. You can use jQuery bind method to subscribe to this event:

 $(selector).slimScroll().bind('slimscroll', function(e, pos){
     console.log("Reached " + pos");
 });

相关插件-滚动,定制和风格,浏览器调整,独立的部件

jQuery 3D立方体切换过渡插件cubeTransition.js

cubeTransition.js是一款超酷3D立方体页面切换过渡动画jQuery插件。该插件通过CSS 3D transforms 和 CSS Animations来制作平滑的立方体过渡动画特效。
  滚动
 3717  30

固定层的js代码

不随滚动条滚动的固定层广告代码
  滚动
 4786  33

带视觉差效果的平滑单页滚动jQuery插件

sonpScroll.js是一款可以制作带视觉差效果的平滑单页滚动特效的jQuery插件
  滚动
 6338  33

jQuery滚动深度插件SCROLL DEPTH

SCROLL DEPTH谷歌分析插件,跟踪用户在您页面预览范围。它可以监控25%,50%,75%和100%滚动点,每一个发送一个谷歌分析事件。
  滚动
 7660  12

讨论这个项目(18)回答他人问题或分享插件使用方法奖励jQ币

    S,___伟er~0
    2016/8/25 10:08:19
    做个自定义滚动条还要这样 回复
    junyi5d0
    2016/6/24 13:06:46
    和nicescroll差不多
        giauquewei0
        2016/11/23 9:11:17
        nicescroll 支持X轴滚动美化,这个貌似是不支持的。果断pass了。
    回复
    北纬…没有你0
    2016/6/21 17:06:19
    您好如果是嵌套的iframe mousewheel事件无法执行 不能通过滚动鼠标来滚动页面 请问怎么解决 回复
    yaowang0
    2016/5/9 17:05:30
    锾^0
    2016/4/26 16:04:44
    效果非常好,定制型抢 回复
    机灵筱筱lu0
    2015/12/28 10:12:30

    请问下楼主,如果我从顶部往下拖拽了一张图片,滚动条需要怎样设置才能也往下随之滚动呢?

    回复
    madla0
    2015/11/10 15:11:26

    怎么用在select上?

    回复
    钟永豪0
    2015/9/30 15:09:06

    很方便很好用的插件,同时感谢西瓜大大写的使用教程.

    回复
    a72727060
    2015/9/14 15:09:27

    滚动条很赞,可就是需要太多金币!!!

        钱秦枫0
        2017/1/12 10:01:50
        是的
    回复
    西瓜4
    2015/9/11 22:09:36

    楼上的,这个插件使用还是非常简单的引用文件为

    js文件注意使用jquery插件,一定要第一个引用jquery

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="libs/prettify/prettify.js"></script>
    <script type="text/javascript" src="../jquery.slimscroll.js"></script>

    CSS样式文件

    <link href="libs/prettify/prettify.css" type="text/css" rel="stylesheet" />

    html部分

    <div style="height:300px;float:left;">
        <div class="area">内容信息</div>
    </div>

    调用插件

    <script type="text/javascript">    
    $(function() {
    	$('.area').slimscroll({
    		width: '200px',
    		height: 'auto'
    	}).parent().css({
    		'float': 'left',
    		'margin-right': '30px'
    	});
    });   
    </script>

    完成。当<div class="area">内容信息</div>中的内容超出外高度300px时就会出现滚动条。

    回复
取消回复
    PROMULGATOR

    钱啸IMQX

    火星