@dwqs/scroll-on-webview NPM

npm-version license

此项目产生的缘由是因为 scroll 事件在 iOS UIWebViews 上的延迟触发, 基于 iscroll 改造

scroll-on-webview

Scroll on webview

Basic Usage

Install the pkg with npm or yarn:

npm i --save @dwqs/scroll-on-webview

// or

yarn add @dwqs/scroll-on-webview

Use in the component:

import ScrollOnWebview from '@dwqs/scroll-on-webview'

export default class Hello extends React.Component {
  render () {
    return (
      <div id='hello'>Scroll Container</div>
    )
  }

  componentDidMount () {
    this.scroller = new ScrollOnWebview('#hello', {
      // your options
    })
  }
}

Options

type格式：类型:默认值

name	type	desc
momentum	bool:true	是否增加弹性缓冲
bindToWrapper	bool:true	是否将事件绑定在 Scroll Container 元素上
HWCompositing	bool:true	是否启用硬件加速
bounce	bool:true	滚动到边界时是否添加缓冲动画
bounceTime	number:300	缓冲动画的持续时间, 单位 ms
bounceEasing	string:''	缓冲动画的缓冲函数，内置可选值：quadratic/circular/back/bounce/elastic
scrollX	bool:false	是否允许在X方向上滚动
scrollY	bool:true	是否允许在Y方向上滚动

Scroller 实例

scroller.x / scroller.y：当前的位置
scroller.on / scroller.off：自定义事件的监听和解绑

myScroll = new ScrollOnWebview('#hello');
myScroll.on('scrollEnd', doSomething);

scrollStart：开始滚动时触发
scroll：滚动时触发
scrollEnd：滚动结束时触发
momentum：执行弹性缓冲时触发

Development

git clone git@github.com:dwqs/scroll-on-webview.git

cd scroll-on-webview && npm i

npm run dev

LICENSE

MIT

@everything-registry/sub-chunk-270 @infinitebrahmanuniverse/nolb-_dw @zalastax/nolb-_dw

1.0.1

6 years ago

1.0.0

6 years ago