@stackoverfloweth/vue-compositions
Version:
A collection of reusable vue compositions.
45 lines • 1.51 kB
JavaScript
import { onMounted, onUnmounted, ref } from 'vue';
/**
* The useScrollLinking composition takes 2 optional element references (source, target)
* and attaches a scroll event listener to the source. When the scroll event of the
* source element is fired, the scroll position of the target is updated to match, producing
* a scroll linking effect.
*
* This composition will tear down when the calling component is unmounted but can be disconnected
* early using the returned disconnect method.
*
* @param source MaybeRef<HTMLElement>
* @param target MaybeRef<HTMLElement>
* @returns UseScrollLinking
*/
export function useScrollLinking(source, target) {
const sourceRef = ref(source);
const targetRef = ref(target);
const handleScroll = () => {
if (!sourceRef.value || !targetRef.value) {
return;
}
targetRef.value.scrollTop = sourceRef.value.scrollTop;
targetRef.value.scrollLeft = sourceRef.value.scrollLeft;
};
const connect = () => {
if (!sourceRef.value) {
return;
}
sourceRef.value.addEventListener('scroll', handleScroll);
};
const disconnect = () => {
if (!sourceRef.value) {
return;
}
sourceRef.value.removeEventListener('scroll', handleScroll);
};
onMounted(connect);
onUnmounted(disconnect);
return {
disconnect,
source: sourceRef,
target: targetRef,
};
}
//# sourceMappingURL=useScrollLinking.js.map