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

问说网 · 发布于 2016-07-14 · 字数5242 · 浏览 1595 · 评论 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-03-18C可以用来表达应用吗?
  • 2015-12-1420行JavaScript代码叫你编写简单的网页模板引擎
  • 2016-04-08分享向各大网站提交Sitemap入口和方法
  • 2016-05-16搞定这10招!助你成功转型自由职业
  • 2016-05-16缤纷上新!30个美艳绝伦的葡萄酒网站设计欣赏
  • 2016-07-04Trianglify唯美的几何图形背景生成插件
  • 2016-07-05刷流量的注意了使用流量宝可能会中毒!
  • 2016-07-14LionBars创建类似OSX Lion操作系统风格的滚动条
  • 发布评论

    为您推荐

    问说网 · 发布于 2016-01-10

    使用SuperBox制作Google图片点击滑动放大效果

    SuperBox是一个静态图片库插件,能够实现类似Google图片搜索的那种点开放大效果,你可以点击以显示一个完整版的图像。在演示中每个图像具有相同的尺寸,但S…

    问说网 · 发布于 2016-06-02

    C语言Side effect和Sequence point副作用

    访问易变对象,修改对象或文件,或者调用包含这些操作的函数都是副作用,它们都会改变执行环境的状态。计算表达式也会引起副作用。

    好货集结快来抢!8款app ui界面PSD免费下载
    AndersonLauren · 发布于 2016-05-15

    好货集结快来抢!8款app ui界面PSD免费下载

    Nerdial应用程序的用户界面,8款APP UI界面免费下载,快来抢,Nerdial应用UI设计遵循今天的趋势,细线,大照片,扁平的颜色,透明的形状,概述图标…

    问说网 · 发布于 2016-06-28

    jqFloat.js实现页面元素的浮动效果jQuery插件

    jqFloat.js是一个jQuery插件,能够让网页里面的任意元素浮动,并且可以实现动画效果,支持鼠标响应事件,并且它是跨浏览器兼容的,使用简单方便,它有助于…

    Java初识

    版本体系 JavaSE Java 2 Platform, J2SE, Standard Edition,标准版, 主要用于桌面应用软件的编程, 包含那些构成Ja…

    • Java初识
    • Java初识
    • Java初识
    • Java初识
    Vincent · 发布于 2016-07-06 · 浏览 1306 · 评论 0

    如何将APK安装到android模拟器中

    配置android环境变量: 变量名:Android 变量值:E:\andriod\eclipse-jee\sdk\platform-tools 修改Path:…

    • 如何将APK安装到android模拟器中
    • 如何将APK安装到android模拟器中
    • 如何将APK安装到android模拟器中
    • 如何将APK安装到android模拟器中
    Vincent · 发布于 2016-07-06 · 浏览 1358 · 评论 0

    分享几款唯美的中文字体

    不可否认,中文的文字排版始终没有英文那么好看,但是不知道你有没有想过,是不是我们使用的字体的问题,没有选择合适的字体,这篇文章将为您分享几款唯美的中文字体。

    • 分享几款唯美的中文字体
    • 分享几款唯美的中文字体
    • 分享几款唯美的中文字体
    • 分享几款唯美的中文字体
    问说网 · 发布于 2016-07-12 · 浏览 1457 · 评论 0
    问说网 · 发布于 2016-07-12

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

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

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

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

    13177 文章
    493 评论
    2121 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 3658

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 3415

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 3687

    图片素材

    关注 图片素材

    文章 29463 · 浏览 2922

    高清图片

    关注 高清图片

    文章 26530 · 浏览 3160

    更多 推荐作者

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

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

    您的反馈我们已收到!

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