帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:PERF  minima  Minim  滚动条  plugin  滚动  
Tiny but perfect jQuery scrollbar plugin

  • 源代码名称:perfect-scrollbar
  • 源代码网址:http://www.github.com/utatti/perfect-scrollbar
  • perfect-scrollbar源代码文档
  • perfect-scrollbar源代码下载
  • Git URL:
    git://www.github.com/utatti/perfect-scrollbar.git
  • Git Clone代码到本地:
    git clone http://www.github.com/utatti/perfect-scrollbar
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/utatti/perfect-scrollbar
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 完美的滚动条

    简约但完美的自定义滚动条插件

    阅读版本为 <的文档,请访问 v0.8.1

    :为什么要完美的滚动条

    完美的滚动条是简约的,但它是完美的,完美的( 对我来说也许对于大多数开发者来说) 滚动条插件。

    • 设计布局没有变化
    • DOM树上没有操作
    • 使用普通 scrollTopscrollLeft
    • 滚动条样式完全可以自定义
    • 有效更新布局更改

    我希望你喜欢它 !

    演示

    它位于 GitHub页面上。

    table-内容

    安装

    npm

    安装和使用完美滚动条的最佳方法是使用 npm。 它被注册为完美的滚动条。

    $ npm install perfect-scrollbar
    手动下载

    你可以从发行版手动下载完美的滚动条。

    来自源的

    如果你想使用插件的开发版本,请手动构建源代码。 开发版本可能不稳定。

    $ git clone https://github.com/utatti/perfect-scrollbar.git
    $ cd perfect-scrollbar
    $ npm install
    $ npm run build
    JSFiddle

    你可以为测试和试验目的而使用以下:

    非官方来源

    未提及的源不保持正式状态。 如果存在以下资源问题,请在每个存储库中询问并解决。

    在使用完美滚动条之前的

    满足以下要求的要求。

    • 容器必须具有 position 样式。
    • 容器必须是普通容器元素。

    基本CSS中包含了以下要求,但请记住你希望更改CSS文件的时间。

    • 容器必须具有 overflow: hidden css样式。
    • 滚动条的位置必须为 absolute
    • 滚动条必须具有 bottom 或者 top,并且滚动条y 必须具有 right 或者 left

    最后,滚动钩子通常被认为是一个坏习惯,而完美的滚动条应该谨慎使用。 除非确实需要自定义滚动,否则始终建议使用浏览器本机滚动。

    警告

    完美的滚动条模拟一些卷轴,但不是所有的种类。 在某些情况下,它也不存在。 你可以在警告中找到这些案例。 基本上,在注释中列出的项目是in实现的,并且未能在未来实现。 如果确实需要这些功能,请考虑使用浏览器本机滚动。

    :如何使用

    首先,请检查容器元素是否满足需求,并导入主 CSS。

    <style>#container {position: relative;width: 600px;height: 400px; }</style>
    <linkrel="stylesheet"href="css/perfect-scrollbar.css">

    通过ES模块导入:

    importPerfectScrollbarfrom'perfect-scrollbar';

    或者在浏览器中:

    <scriptsrc="dist/perfect-scrollbar.js"></script>

    要初始化:

    constcontainer=document.querySelector('#container');constps=newPerfectScrollbar(container);// or just with selector stringconstps=newPerfectScrollbar('#container');

    它可以用选项初始化。

    constps=newPerfectScrollbar('#container', {
     wheelSpeed:2,
     wheelPropagation:true,
     minScrollbarLength:20});

    如果容器或者内容的大小发生更改,请调用 update

    ps.update();

    如果要销毁滚动条,请使用 destroy

    ps.destroy();
    ps =null; // to make sure garbages are collected

    如果你想滚动到某个地方,只需更新 scrollTop

    constcontainer=document.querySelector('#container');container.scrollTop=0;

    你还可以获得有关如何使用 examples/ 中的插件的信息。

    命令行选项

    handlers {String[]}

    它是要滚动元素的处理程序列表。

    默认: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch']

    wheelSpeed {Number}

    用于鼠标滚轮事件的滚动速度。

    默认: 1

    wheelPropagation {Boolean}

    如果这里选项为 true,则滚动到侧面的末尾时,鼠标滚轮事件将传播到父元素。

    默认: false

    swipePropagation {Boolean}

    如果这里选项为 true,则滚动到侧端时,滚动滚动将传播到父元素。

    默认: true

    swipeEasing {Boolean}

    如果这里选项为 true,则滑动滚动将被释放。

    默认: true

    minScrollbarLength {Number?}

    当设置为整数值时,滚动条的拇指部分将不会收缩 below的像素数。

    默认: null

    maxScrollbarLength {Number?}

    当设置为整数值时,滚动条的拇指部分不会在该像素数上展开。

    默认: null

    scrollingThreshold {Number}

    这将为 ps--scrolling-xps--scrolling-y 类设置 threashold。 在默认的CSS中,不管悬停状态如何,它们都会显示滚动条。 单位是毫秒。

    默认: 1000

    useBothWheelAxes {Boolean}

    当设置为 true,并且只有一个( 垂直或者水平) 滚动条可见时,垂直滚动和水平滚动将影响滚动条。

    默认: false

    suppressScrollX {Boolean}

    当设置为 true 时,无论内容宽度如何,X 轴中的滚动条都将不可用。

    默认: false

    suppressScrollY {Boolean}

    设置为 true 时,Y 轴中的滚动条将不可用,无论内容高度如何。

    默认: false

    scrollXMarginOffset {Number}

    内容宽度可以超过容器宽度而不启用X 轴滚动条的像素数。 允许某些"摆动室"或者"偏移中断",因此仅由于几个像素而不启用X 轴滚动条。

    默认: 0

    scrollYMarginOffset {Number}

    内容高度可以超过容器高度而不启用Y 轴滚动条的像素数。 允许某些"摆动室"或者"偏移中断",因此仅由于几个像素而不启用Y 轴滚动条。

    默认: 0

    事件

    完美的滚动条分派定制事件。

    container.addEventListener('ps-scroll-x', () =>...);

    ps-scroll-y

    当向任意方向滚动y 轴时激发此事件。

    ps-scroll-x

    当x 轴在任意方向滚动时激发此事件。

    ps-scroll-up

    此事件在向上滚动时激发。

    ps-scroll-down

    向下滚动时激发此事件。

    ps-scroll-left

    此事件在向左滚动时激发。

    ps-scroll-right

    此事件在向右滚动时激发。

    ps-y-reach-start

    当滚动到达y 轴的起始位置时激发此事件。

    ps-y-reach-end

    当滚动到y 轴( 用于无限滚动)的末尾时触发这里事件。

    ps-x-reach-start

    当滚动到达x 轴的开始时激发此事件。

    ps-x-reach-end

    当滚动到x 轴的末尾时激发此事件。

    你还可以通过 reach 属性监视到达状态。

    constps=newPerfectScrollbar(...);console.log(ps.reach.x); // => 'start' or 'end' or nullconsole.log(ps.reach.y); // => 'start' or 'end' or null

    支持

    如果你想改进这个项目或者使用这个问题,请随意上传一个发行问题。

    对于常见问题,有一个常见问题解答wiki页面。 上传问题前请检查页面。

    此外,项目没有积极地维护。 不支持维护人员,我们大多数人都忙于我们的专业或者个人工作。 请理解,问题可能需要花一些时间才能解决。 上传PR是解决问题最快的方法。

    IE 支持

    插件是在现代MS浏览器中开发的,包括边缘和 IE11,但主要是因为IE11的IE 呈现 Bug。 在中提到这个问题,请注意。

    不支持 IE <11,并且不接受在 IE <=10中修复问题的修补程序。 如果需要支持旧的IEs,请在项目中进行 fork,并在本地进行修改。

    许可证



    文章标签:plugin  PERF  滚动  Minim  minima  滚动条  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语