帮酷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  |  如果智培  |  酷兔英语