Scroll Sync

Scroll synchronization (scroll-sync), which associates multiple elements with scroll properties (overflow: scroll). When a scroll event occurs in one of the elements, the scroll effect is mapped to all the elements associated with it. To achieve synchronization purposes. scroll-sync supports fixed synchronization (px) and relative synchronization (%).

INSTALL

npm install -S scroll-sync
# OR
yarn add scroll-sync

USAGE

import ScrollSync from 'scroll-sync'

const ss = new ScrollSync({
    disabled: false, // [Boolean] Default value, allow to be empty.
    relative: true, // [Boolean] Default value, allow to be empty.
    doms: document.querySelectorAll('.scroll-container') // [Array] These elements must set scroll attributes.
})

// do sth....
// You can also find another opportunity to set related elements after instantiating the object.
ss.set(document.querySelectorAll('.scroll-container'))

// Or add or delete.
// ss.add([elements])
// ss.remove([elements])

// You can also actively clear the listener event and clear the cache.
// ss.clear()

DOCUMENT

Please click here for an online experience. (中文)

ABOUT

This library is an additional product obtained from my actual work. Because I don’t use it frequently, I will not actively add any new functions except for necessary problem fixes. If you have any new function requirements, please Leave me a message in ISSUES and I will help you achieve it in my spare time.