@okiba/scroll-element

    1.0.12 • Public • Published

    Okiba / ScrollElement

    A class that extends Component (@okiba/component). When enabled, this component translate the dom element to the last Y passed to onScroll function

    import qs from '@okiba/dom'
    import ScrollElement from '@okiba/scroll-element'
    
    const scrollElement new ScrollElement({el: qs('#app'), options: {enabled: true}})

    Installation

    npm i --save @okiba/scroll-element

    Or import it directly in the browser

    <script type="module" src="https://unpkg.com/@okiba/scroll-element/index.js"></script>

    Usage

    import ScrollElement from '@okiba/scroll-element'

    Untranspiled code 🛑

    Okiba UI packages are not transpiled, so don't forget to transpile them with your favourite bundler. For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

    {
      test: /\.js$/,
      exclude: /node_modules\/(?!(@okiba)\/).*/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }

    disable()

    Disable component feature and reset the dom element transform

    enable()

    Enable component feature

    update(args: {y})

    Update the target Y to reach and request an animation frame if component is enabled

    • Accepts an hash whose properties can be:

    Arguments

    + args: Object

    Arguments to create a component

    + y: Number

    Y to reach

    onRaf()

    Update the translate Y of the element like to target Y

    onResize()

    Update element bounds after a resize (top and bottom)

    listen()

    Adds event listeners

    unlisten()

    Removes event listeners

    onDestroy()

    Destroy component removing event listeners

    Keywords

    none

    Install

    npm i @okiba/scroll-element

    DownloadsWeekly Downloads

    42

    Version

    1.0.12

    License

    MIT

    Unpacked Size

    279 kB

    Total Files

    6

    Last publish

    Collaborators

    • fiad
    • ghzmdr
    • lavolpecheprogramma