@1eeing/scroll-listener 中文文档教程
scrollListener
在滚动事件上做你想做的一切。 比如延迟加载，上传数据。
Installation
npm install --save @1eeing/scroll-listener
Usage
// js
import { createListener } from '@1eeing/scroll-listener';
// When domContentLoaded has triggered.
const listener = createListener({
positions: ['main'],
actions: [
() => {
console.log('The element which id is main has scrolled to top of the screen.')
}
]
})
listener.start();
// When dom is removed
listener.stop();
<!-- html -->
<body>
<div id='main'></div>
</body>
如果你正在使用 React，你可以像这样使用。
import React, { useEffect } from 'react';
import { createListener } from '@1eeing/scroll-listener';
const App = () => {
useEffect(() => {
const listener = createListener({
positions: ['main'],
actions: [
() => {
console.log('The element which id is main has scrolled to top of the screen.')
}
]
})
listener.start();
return () => listener.stop();
}, [])
return (
<div>
<div id='main'>
Hello world.
</div>
</div>
)
}
export default App;
Options
positions
类型：<代码>字符串[]
您要收听的元素的 ID。
actions
类型：((id: string, offsetTop: number) => void)[]
您要收听的元素的动作。 默认情况下，当元素滚动到屏幕顶部时触发。 职位一一对应。
当传入 target 时，当元素滚动到 target 顶部时会触发该动作。
triggerType?
类型：<代码>'出现' | '出现' | '一次'
控制何时触发动作。 默认为一次。
delayType?
类型：'throttle' | '去抖动'
延迟你的行动功能。 默认是未定义的。
delay?
输入：<代码>数字
仅在传入 delayType 时有效。默认为 500 毫秒。
offset?
输入：<代码>数字
从屏幕或目标的顶部偏移。
target?
类型：<代码>字符串
您要收听的目标元素的 ID。 默认目标是窗口。
needRequestIdleCallback?
类型：<代码>布尔值
使用 requestIdleCallback 触发动作。 详见 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback[https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback] . 默认为假。
TODO
scrollListener
Do everything you want on scroll event. Such as lazy load , upload data.
Installation
npm install --save @1eeing/scroll-listener
Usage
// js
import { createListener } from '@1eeing/scroll-listener';
// When domContentLoaded has triggered.
const listener = createListener({
positions: ['main'],
actions: [
() => {
console.log('The element which id is main has scrolled to top of the screen.')
}
]
})
listener.start();
// When dom is removed
listener.stop();
<!-- html -->
<body>
<div id='main'></div>
</body>
If you are using React, you can use like this.
import React, { useEffect } from 'react';
import { createListener } from '@1eeing/scroll-listener';
const App = () => {
useEffect(() => {
const listener = createListener({
positions: ['main'],
actions: [
() => {
console.log('The element which id is main has scrolled to top of the screen.')
}
]
})
listener.start();
return () => listener.stop();
}, [])
return (
<div>
<div id='main'>
Hello world.
</div>
</div>
)
}
export default App;
Options
positions
type: string[]
The id of the element you want to listen.
actions
type: ((id: string, offsetTop: number) => void)[]
The action of the element you want to listen. Triggerd when the element scrolls to the top of the screen by default. One-to-one correspondence with postions.
when target is passed in, the action will be triggerd when the element scrolls to the top of the target.
triggerType?
type: 'appeard' | 'appearing' | 'once'
Control when to trigger action. Default is once.
delayType?
type: 'throttle' | 'debounce'
Delay your action function. Default is undefined.
delay?
type: number
Only worked when delayType is passed in. Default is 500 ms.
offset?
type: number
Offset from the top of the screen or target.
target?
type: string
The target element'id you want to listen. Default the target is window.
needRequestIdleCallback?
type: boolean
Use requestIdleCallback to trigger action. See detail https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback[https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback]. Default is false.
