iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 24
0
Modern Web

30天學習30套前端技術(2018年)系列 第 24

[十分鐘學習] nanoScroller.js - Mac OS風格捲軸

example1

nanoScroller.js是一套用簡單方法做出類似Mac OS X風格捲軸的jQuery套件,儘管目前沒有在持續維護,但使用上相當簡單且支援性高仍然是不錯的選擇

GitHub Star: 2,600
Javascripting Overall: 66%
瀏覽器: ChromeFirefoxIE7+
RWD: 不支援(可運作)
License: MIT


《安裝》

  • CDN

      <!-- jQuery v1.9.1 -->
      <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
      <!-- nanoScroller.js v0.8.7 -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.8.7/css/nanoscroller.min.css" rel="stylesheet" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.8.7/javascripts/jquery.nanoscroller.min.js"></script>
    

《範例》

  • 美化捲軸

      <div class="example nano">
      	<div class="nano-content">
      		<!-- 內容 -->
      	</div>
      </div>
      <style>
      	.example { 
      		background: #efefef;
      		width: 240px;
      		height: 120px; /* 設定高度 */
      	}
      	.example > .nano-pane  { background: #aaa; /* 設定scrollbar背景色 */ }
      	.example > .nano-pane > .nano-slider { background: #333;  /* 設定scrollbar顏色 */ }
      </style>
      <script>
      	$( ".example" ).nanoScroller( {
      		// 參數設定[註1]
      	});
      </script>
    

    [註1]

    參數 描述 選項
    iOSNativeScrolling 當遇到iOS系統時,則隱藏nanoScroller並使用原生的iOS的捲軸(iOS 5+) truefalse(預設)
    sliderMinHeight nanoScroller的最小高度 [數字]、20(預設)
    sliderMaxHeight nanoScroller的最大高度 [數字]、null(預設)
    preventPageScrolling 當nanoScroller捲軸滾動到最上面或最下面時,則停止影響外層的頁面繼續滾動 truefalse(預設)
    disableResize 不允許nanoScroller捲軸調整尺寸 truefalse(預設)
    alwaysVisible 永遠顯示nanoScroller truefalse(預設)
    flashDelay 快閃模式,自動隱藏nanoScroller的時間(單位:毫秒) [數字]、1500(預設)
    paneClass nanoScroller軌道的類別名稱 [字串]、nano-pane(預設)
    sliderClass nanoScroller捲軸的類別名稱 [字串]、nano-slider(預設)
    contentClass nanoScroller內容的類別名稱 [字串]、nano-content(預設)
    enabledClass nanoScroller啟用的類別名稱 [字串]、__enabled(預設)
    flashedClass 快閃模式的類別名稱 [字串]、__flashed(預設)
    activeClass nanoScroller捲軸進行中的類別名稱 [字串]、__active(預設)
    tabIndex contentClass指定目標的tabIndex屬性 [數字]、0(預設)

《延伸》

  1. nanoScroller.js
  2. jamesflorentino/nanoScrollerJS: A jQuery plugin that offers a simplistic way of implementing Lion OS scrollbars.

上一篇
[十分鐘學習] Toolbar.js - 工具列
下一篇
[十分鐘學習] iCheck - 免出國,也可以幫C先生和R先生做Face Off
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言