# Class: ScrollSnap

## ScrollSnap

#### new ScrollSnap($scroller, options)

  Allow to snap to items when using a native scroll

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `$scroller` | Object |

  `options`

  Object

  ###### Properties

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `lockedClass` | String | <optional> | locked |
  `direction` | String | <optional> | h | Values: 'h' | 'v'
  `snapTo` | String | Array.<HTMLElement> | <optional> |  |
  `minItemsToActivate` | number | <optional> | 2 |
  `$offsetElement` | HTMLElement | <optional> |  |

  `offset`

  Object

  <optional>

  ###### Properties

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `top` | Number | <optional> |
  `left` | Number | <optional> |

  `onSnapStart` | ScrollSnap_Handler | <optional> |  |
  `onSnapEnd` | ScrollSnap_Handler | <optional> |  |
  `onReachStart` | ScrollSnap_Handler | <optional> |  |
  `onReachEnd` | ScrollSnap_Handler | <optional> |  |
  `_setScroll` | function | <optional> |  | Internal function using GSAP and scrollTo plugin to set the scroll. Can be override to use another library

  ##### Example

      let sn = new ScrollSnap($scroller, options);

      // To refresh
      sn.refresh( [options] )

      // To navigate
      sn.previous( [duration] )
      sn.next( [duration] )
      sn.scrollToItem( $item [, duration] )
      sn.scrollToIndex( index [, duration] )

      // To remove
      sn.clean()

### Methods

#### clean()

  Remove all events, css class or inline styles

#### next( [duration])

  Scroll to the next item

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `duration` | Number | <optional> | In ms

#### previous( [duration])

  Scroll to the previous item

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `duration` | Number | <optional> | In ms

#### refresh( [options])

  Refresh the scroller and snap to the asked item

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---

  `options`

  Object

  <optional>

  ###### Properties

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `snapTo` | Array.<HTMLElement> | string |  | Selector or DOMList of the items
  `$itemToSnapOn` | HTMLElement | <optional> | Item to put on the left
  `$offsetElement` | HTMLElement | <optional> |

  `offset`

  Object

  <optional>

  ###### Properties

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `top` | Number | <optional> |
  `left` | Number | <optional> |

  `direction` | String | <optional> | Values: 'h' | 'v'

#### scrollToIndex(index [, duration])

  Scroll to a specific index

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `index` | Number |  |
  `duration` | Number | <optional> | In ms

#### scrollToItem($item [, duration])

  Scroll to a specific item

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `$item` | HTMLElement |  |
  `duration` | Number | <optional> | In ms

### Type Definitions

#### ScrollSnap_Handler(data)

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---

  `data`

  Object

  ###### Properties

  Name | Type | Description
  --- | --- | ---
  `$scroller` | HTMLElement |

  `item`

  Object

  ###### Properties

  Name | Type | Description
  --- | --- | ---
  `index` | number |
  `$item` | HTMLElement |
  `coords` | number |

  `type` | string | If the event comes after a scroll: scroll. If it comes after a function call (like next, previous, ...): api.
  `scrollerSize` | number |
  `offsetSize` | number |

#### Search results