漂亮的虚拟滚动条

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

 53895  372  查看评论 (22)
漂亮的虚拟滚动条 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");
 });
相关插件-滚动,定制和风格,浏览器调整,独立的部件

滚动弹出顶部导航插件headhesive.js

headhesive.js创建一个按需显示头部。指定当你浏览器滚动到某个位置时显示。
  滚动
 12627  71

jquer滚动隐藏显示顶部导航栏

引导固定导航栏 页面向下滚动时隐藏导航栏,向上显示,以及滚动到低部时显示顶部导航。
  滚动
 21163  52

仿股市表格实时轮播

这是一款简单的不需要任何外部插件的轮播效果图
  滚动
 6710  64

jquery.mousewheel.js鼠标滚动插件

鼠标全屏滚动插件
  滚动
 7718  47

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

    浮游 0
    2017/4/5 16:51:50

    动态添加内容时,怎么控制滚动条位置,让其始终显示在最下面(和微信聊天一样,显示最新发的一条消息)

    回复
    hansteve 0
    2017/3/16 9:43:33
    看看再说,不漂亮。 回复
    小卓鸟 0
    2017/3/11 14:30:27

    我爱你,给不给币。

    回复
    (???)?此人有毒 3
    2017/3/6 10:01:35

    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时就会出现滚动条。

    给不给币啊

    回复
    S,___伟er~ 0
    2016/8/25 10:08:19
    做个自定义滚动条还要这样 回复
    junyi5d 0
    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事件无法执行 不能通过滚动鼠标来滚动页面 请问怎么解决 回复
    yaowang 0
    2016/5/9 17:05:30
    锾^ 0
    2016/4/26 16:04:44
    效果非常好,定制型抢 回复
    机灵筱筱lu 0
    2015/12/28 10:12:30

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

    回复
取消回复