漂亮的虚拟滚动条

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

 45794  345  查看评论 (21)
漂亮的虚拟滚动条 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");
 });

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

基于swiper实现手机上拉切换页面

基于swiper实现手机上拉切换页面代码简单一看就会,修改简单。
  滚动
 4914  28

jquery页面滚动定位(支持上下滑动)

jquery页面滚动定位(支持上下滑动)
  滚动
 5473  50

jQuery Smoove-华丽的CSS3滚动效果

jQuery Smoove使用它很容易实现CSS3转换效果,让你向下滚动页面的内容时展现绚丽的css3动画效果。
  滚动
 23876  112

jquery滚动效果插件ScrollMe

ScrollMe是一个页面添加简单的滚动效果的jQuery插件,当你向下滚动页面时,ScrollMe可以对页面元素进行轴标扫描、旋转、转换和改变不透明度,从而让整个页面动感起来。ScrollMe非常容易使用,它不需要写JS代码,只需在元素中写上属性就OK了。
  滚动
 4931  47

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

    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

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

    回复
    madla 0
    2015/11/10 15:11:26

    怎么用在select上?

    回复
取消回复