iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 22
1
Modern Web

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

[十分鐘學習] iScroll - 3秒變成iPhone,模擬拖曳反彈(bounds)神器

  • 分享至 

  • xImage
  •  

example1

iScroll是一款高性能,檔案小,無相依性且多平台可的JavaScript拖曳滑動

GitHub Star: 10,000
Javascripting Overall: 80%
瀏覽器: ChromeFirefoxIE9+
RWD: 不支援(可運作)
License: MIT


《安裝》

  • CDN

      <!-- iScroll v5.2.0 -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
    
  • npm

      $ npm install iscroll
    

《範例》

  • 可拖曳瀏覽效果

      <body onload="loaded()">
      	<div id="example">
      		...
      	</div>
      	<style>
      		#example {
      			height: 100px; /* 設定高度 */
      			overflow: hidden; /* 當內容超過高度時,則裁減內容 */
      		}
      	</style>
      	<script>
      		function loaded() {
      			myScroll = new IScroll( "#example", { 
      				// 參數設定[註1]
      			});
      		}
      	</script>
      </body>
    

    [註1]

    參數 描述 選項

    bounce|開啟拖曳瀏覽結束時的小反彈||true(預設)、false
    eventPassthrough|關閉鎖住拖曳瀏覽效果(搭配scrollX設定成true,將子元件CSS Style設定成position設定成absolute,可讓子元件獨立做橫向拖曳瀏覽)|truefalse(預設)
    click|啟用click事件|truefalse(預設)
    disableMouse|禁用mouse事件|truefalse(預設)
    disablePointer|禁用pointer事件|truefalse(預設)
    disableTouch|禁用touch事件|truefalse(預設)
    freeScroll|2D拖曳瀏覽效果,也就是水平垂直同時可以瀏覽(搭配scrollX設定成true)|truefalse(預設)
    invertWheelDirection|反向拖曳瀏覽|truefalse(預設)
    preventDefault|啟用preventDefault()|true(預設)、false
    scrollbars|顯示ScrollBar|truefalse(預設)
    scrollX|允許水平拖曳瀏覽|truefalse(預設)
    scrollY|允許垂直拖曳瀏覽|true(預設)、false
    tap|啟用tap監聽事件,可直接輸入想要啟動的函式名稱|truefalse(預設)、[函式]


《延伸》

  1. iScroll 4 – Matteo Spinelli's Cubiq.org
  2. cubiq/iscroll: Smooth scrolling for the web

上一篇
[十分鐘學習] Hover.css - 強化系游標移入動畫效果
下一篇
[十分鐘學習] Toolbar.js - 工具列
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言