簡(jiǎn)單typescript+rollup.js開發(fā)的上下滑動(dòng)觸發(fā)指定動(dòng)作庫(kù)cdd-scroller

darkbug 發(fā)布于2019-08-21 17:37 / 865人閱讀

摘要：這是個(gè)移動(dòng)端和端通用的檢測(cè)滑動(dòng)的庫(kù)。即在滑塊在一定范圍內(nèi)到達(dá)頂部或者打到底部，亦或者二者均可的觸發(fā)指定函數(shù)。離開觸頂觸底觸發(fā)函數(shù)。集成節(jié)流閥，可設(shè)置頻率，提高性能。默認(rèn)值等于節(jié)流閥模式。防抖減少頻率節(jié)流閥的頻率，默認(rèn)為。

cdd-scroller

tags: scroller

這是個(gè)移動(dòng)端和pc端通用的檢測(cè)滑動(dòng)的庫(kù)。

傳送門

npm

github

功能

觸頂/觸底的觸發(fā)函數(shù)。
即：在滑塊在一定范圍內(nèi)到達(dá)頂部或者打到底部，亦或者二者均可的觸發(fā)指定函數(shù)。

離開觸頂/觸底觸發(fā)函數(shù)。
有些情況我們不僅需要滑塊觸頂或者觸底，在滑塊離開二者的一定范圍時(shí)也需要觸發(fā)一些函數(shù)。

設(shè)置觸頂/觸底的閾值。

集成節(jié)流閥，可設(shè)置頻率，提高性能。

用法

scroller({
    fElement:dom,
    threshold?:,
    arrived:,
    unarrived:,
    up?:,
    down?:,
    modal?:"debounce"/"throttle",
    frequency?:250
})

往 scroller中添加一個(gè)對(duì)象即可

fElement: 父元素對(duì)象

threshold: 默認(rèn)的到達(dá)底部的閾值，比如默認(rèn)值20，也就是說在到達(dá)底部的20px范圍呢可觸發(fā)arrived函數(shù)。

arrived:達(dá)到頂部或者底部的觸發(fā)函數(shù)

unarrived:離開頂部或者底部的觸發(fā)函數(shù)

up:閾值，如果設(shè)置則觸發(fā)下拉到達(dá)頂部的函數(shù)（默認(rèn)為null)

down:閾值，如果設(shè)置則為到達(dá)底部的閾值。（默認(rèn)值等于threshold

modal:節(jié)流閥模式。debounce：防抖；throttle:減少頻率;

frequency:節(jié)流閥的頻率，默認(rèn)為250。

例子

html





  
  
  
  Document
  




  

    
      項(xiàng)目_1
      項(xiàng)目_2
      項(xiàng)目_3
      項(xiàng)目_4
      項(xiàng)目_5
      項(xiàng)目_6
      項(xiàng)目_7
      項(xiàng)目_8
      項(xiàng)目_9
      項(xiàng)目_10