漂亮的虚拟滚动条

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

 51752  363  查看评论 (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");
 });
相关插件-滚动,定制和风格,浏览器调整,独立的部件

jQuery和CSS3超炫3D整屏垂直滚动页面特效

这是一款使用jQuery和CSS3制作的效果超炫的3D整屏垂直滚动页面特效。该页面滚动特效在用户滚动鼠标或点击右侧的导航圆点按钮时,当前页面会3D倾斜缩小,下一个页面会逐渐放大并占满整个屏幕,效果非常酷。
  滚动
 8788  93

苹果applewatch界面

苹果applewatch界面
  滚动
 6049  33

jQuery无限滚动新闻插件tickerNews

tickerNews 是一个轻量级但有很强大的 jQuery 新闻滚动插件,你可以使用它让一个新闻列表进行无限的滚动。
  滚动
 3694  16

可制作炫酷页面滚动效果的jQuery事件插件

jquery.scrollex.js是一款可制作炫酷页面滚动效果的jQuery事件插件。该插件中包含有一组预置的jQuery事件,通过这些事件,可以在页面滚动时为指定元素制作相应的动画效果。
  滚动
 8473  76

讨论这个项目(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

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

    回复
取消回复