LionBars创建类似OSX Lion操作系统风格的滚动条

问说网 · 发布于 2016-07-14 · 字数5242 · 浏览 1661 · 评论 0

今天介绍一款超酷的帮助你生成OSX式样的滚动条的jQuery插件Lionbars,使用这个插件,你可以快速的生成一个OSX风格的滚动条。绝对能够让你的UI界面充满苹果的味道。

lionbars-js

主要特点

  • Browser support – IE8, Safari, Firefox, Chrome, Opera (Win & OSX)
  • Scrollbars look exactly the same in all browsers and OS
  • The content doesn’t get shrunk when scrollbars are added, just like in OSX
  • Option to auto-hide scrollbars
  • Dark and light style
  • EndlessScroll functionality
  • 压缩后非常小,8kb,开发版本16kb
  • 使用简单,目前版本0.3,不支持选项,不过网站上号称“Coming Soon”,相信很快就会出新版本
  • 可以支持定制样式

使用方法

  1. Download LionBars
  2. Include the script right after jquery
  3. Include the css however you prefer. For example, in the main stylesheet @include ‘lionbars.css’;
  4. Call .lionbars() on all elements that have scrollbars $(‘#box1, #box2’).lionbars();
  5. You’re done!

Options

LionBars has some options that you can use to do some useful things. They will be explained here. All options are passed as an object to the constructor.

$('div').lionbars({
    autohide: true
});

Autohide scrollbars

LionBars gives you the opporunity to autohide the scrollbars so that they will only appear if you scroll the content. To enable the feature you only have to set autohide to true.

EndlessScroll

This feature makes it possible to react on reaching either to bottom o the right of the scrolled content. If you pass some handlers to the options they will be called and you can modify the content and update it.

$('div').lionbars({
    reachedBottom: function () {
        // do something with the content
        $(this).append('your html');
    },
    reachedRight: function () {
        // do something with the content
        $(this).append('your html');
    }
});

Other notes

LionBars is a relatively new plugin and has been recently fully rewritten. The basic functionality is there and working, other extras like light and dark styles, etc. are going to be added soon.

Thank you for your interest LionBars!

动态更改

这是一款很好用的滚动条模拟插件,使用也很简单,只需要设置滚动条控制区域的高度(宽度),还有将该区域的overflow-y(overflow-y)设置为auto,就可以使用了。

但是由于这款插件只是提供了滚动条初始加载的功能,也就是说,在模拟滚动条出现后,控制区域的更新(扩大或者缩小)滚动条不会随之更新,仍然是初始状态, 这就造成了滚动条控制与内容不同步的bug。要修改这个问题只能根据插件的代码来对页面的内容进行刷新,下面有一个刷新的函数:

function resetScrollRatios(obj,page){
    if($(".lb-v-scrollbar").length>0){
        var wrapWidth=$(obj).css("width");
        var wrapHeight=$(obj).css("height");
        var Hmin=15;
        var Hgap=$(obj).get(0).offsetHeight-$(".lb-v-scrollbar").height()+4;
        var Hmax=$(obj).get(0).offsetHeight - Hgap - Hmin;
        if(page=="index"||page=="self"){
            var srcollH=$(obj).find("ul").height();
        }else{
            var srcollH=$(obj).find(".p_line table").height();
        }
       
        var vSHeight=Math.round(($(obj).get(0).offsetHeight*Hmax)/srcollH);
        if(srcollH>wrapHeight.replace("px","")){
            if($(".lb-v-scrollbar").css("display")=="none"){
                $(".lb-v-scrollbar").show();
            } 
        }
        $(obj).find('.lb-wrap').css({
           height:wrapHeight,
           width:parseInt(wrapWidth.replace("px",""))+17+'px'
        });
        $(".lb-v-scrollbar").css({
           height:parseInt(wrapHeight.replace("px",""))-4+'px'
        });
        vSHeight=(vSHeight < Hmin) ? Hmin : vSHeight;
        $(".lb-v-scrollbar-slider").css({
            height:vSHeight
        });
        var ratios=($(obj).get(0).offsetHeight-$(obj).find(".lb-wrap").get(0).scrollHeight)/($(".lb-v-scrollbar").height()-parseInt($(".lb-v-scrollbar-slider").css("height").replace("px","")));
        $(obj).attr('vratio', ratios);
    }else{
        var wrapHeight=$(obj).css("height");
        if(page=="index"||page=="self"){
            var srcollH=$(obj).find("ul").height();
        }else{
            var srcollH=$(obj).find(".p_line table").height();
        }
        if(srcollH>wrapHeight.replace("px","")){
            $(obj).lionbars();
        }
    }
}

在内容变化完成之后调用该函数就能使滚动条无论在什么情况下都与内容完美同步啦。

当然还有一点小问题,就是如果内容变化中是有图片出现的话,应该让图片显示完成后在刷新滚动条:

$(this).show(function(){setTimeout('resetScrollRatios(".p_list","question")',250);});

相关链接

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2015-10-21Apache中的httpd.conf文件参数配置详解
  • 2015-10-21WordPress数据库中的表字段类型说明
  • 2015-12-13在网页中如何使用@Font-face自定义字体
  • 2016-04-07在CSS中使用自定义字体
  • 2016-05-14Layer Guides实用的PS参考线插件
  • 2016-05-27Css-layout使用纯JavaScript实现CSS布局
  • 2016-06-06Git初始化和自定义初始目录
  • 2016-06-14Kalendae轻量级时间日期选择JavaScript插件
  • 发布评论

    为您推荐

    问说网 · 发布于 2015-08-07

    浅谈Unity3D手机游戏开发框架

    以往我们在做Web开发时,总是拿来主义,需要开发后台Web程序,先找MVC框架,需要开发前端网页,先找来CSS框架,需要前端动画,先找JS框架,基本上没有一样东…

    图灵智能机器人API接入文档
    问说网 · 发布于 2016-04-07

    图灵智能机器人API接入文档

    图灵机器人 API 是在人工智能的核心能力(包括语义理解、智能问答、场景交互、知 识管理等)的基础上,为广大开发者、合作伙伴和企业提供的一系列基于云计算和大数据…

    jQuery Scroll Path按路径元素滚动动画插件
    问说网 · 发布于 2016-07-02

    jQuery Scroll Path按路径元素滚动动画插件

    jQuery Scroll Path是一个jQuery的滚动路径插件,可以让你自定义滚动路径。该插件是使用canvas flavored的语法来绘制路径,并且支…

    问说网 · 发布于 2016-07-04

    Trianglify唯美的几何图形背景生成插件

    Trianglify 是一个 SVG 背景图片生成器,主要是生成简单的集合图形,但是看起来非常好看,生成的 SVG 图片非常漂亮,支持将生成的图形导出为SVG和…

    Vincent · 发布于 2016-07-06

    Java接口和抽象类

    抽象类 抽象类中的方法既可以有抽象方法,也可以有非抽象方法,可以全部都是抽象方法,也可以全部都是非抽象方法 抽象方法只能出现在抽象类或接口中,不能出现在非抽象类…

    详细讲解JAVA中的IO流
    Vincent · 发布于 2016-07-06

    详细讲解JAVA中的IO流

    包 java.io   文件路径 1. java.io.File是文件和目录路径名的抽象表示形式 2. 抽象路径名中的第一个名称是目录名,抽象路径名中…

    POI
    Vincent · 发布于 2016-07-06

    POI

    官方网站 http://poi.apache.org/   术语 OOXML Office Open XML standards,基于XML格式的新标…

    问说网 · 发布于 2016-07-12

    分享10个在使用Photoshop过程中的小技巧

    作为设计师,可能每天都需要和Adobe Photoshop打交道,这篇文章分享给大家10个在使用Photoshop过程中的小技巧,巧用这些方法将使你的设计锦上开…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13177 文章
    493 评论
    2140 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 4032

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 4067

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 4109

    图片素材

    关注 图片素材

    文章 29463 · 浏览 3275

    高清图片

    关注 高清图片

    文章 26530 · 浏览 3534

    更多 推荐作者

    关注 秋末残雪

    文章 106 · 评论 0

    关注 惢碎葬爱

    文章 96 · 评论 0

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!