JScroll

KO | EN

gitlite — search

#hacktoberfest #react #ai #typescript #rust #deep-learning #linux #docker #java #awesome #vue #security #mcp #open-source

(★ 87)

No description available.

JScroll Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# JScroll

Smooth scrolling sections based on <a href="http://www.everyday3d.com/blog/index.php/2014/08/18/smooth-scrolling-with-virtualscroll/">VirtualScroll</a>.

## Usage

###### Install
`yarn add @twotwentytwo/jscroll`

###### Javascript
```Javascript
import JScroll from '@twotwentytwo/jscroll'

JScroll.init({ /* Options are optional */ })
```
###### Markup
```HTML
<div data-smooth> 
  <div data-smooth-item></div>
  <div data-smooth-item></div>
  <div data-smooth-item data-speed="1.1"></div> 
  <div>
    <div>
      <div data-smooth-item></div> 
    </div>
  </div>
  <div data-smooth-item>
    <div data-smooth-item data-speed="0.75"></div> 
  </div>
</div>
```

## Options
`ease`: Easing value (defaults to `0.1`)

`scrollbar`: Virtual scrollbar (defaults to `false`)

`disableMobile`: Disable JScroll on mobile devices (defaults to `true`)

`preload`: Trigger resize after loading all images (defaults to `false`)

`vs`:
  - `mouseMultiplier`: Defaults to 0.45
  - `touchMultiplier`: Defaults to 2.5
  - `firefoxMultiplier`: Defaults to 90
  
## Methods
`init()`: Initialise instance

`update()`: Update instance

`resize()`: Trigger resize

`preload()`: Preload images

`tick()`: Where the magic happens

`stop()`: Stop scrolling

`resume()`: Resume scrolling

`destroy()`: Clean instance

`scrollTo(someElement.offsetTop)`: Anchor scroll

## Events

`on('tick', ({ target, current }) => {})`: Raf callback. Scroll and lerped scroll params.

`on('scroll', ({ delta, target }) => {})`: Scroll callback. Delta and scroll params.

## Getters
`getSmooth`: Returns lerped scroll value

`getScroll`: Returns scroll value

## References

Some great examples of sites using JScroll.

<a href="https://www.crrtt.com/" target="_blank">Fabio Caretti</a><br>
<a href="https://discoverylandco.com" target="_blank">Discoverylandco</a>

JScroll

JScroll Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

JScroll

JScroll Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README