@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
34 lines • 1.39 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { useRef } from 'react';
/**
* useScrollSync returns scroll event handler to be attached to synchronized scroll elements.
*
* For example
* const handleScroll = useScrollSync([ref1, ref2]);
* <div ref={ref1} onScroll={handleScroll}/>
* <div ref={ref2} onScroll={handleScroll}/>
*/
export function useScrollSync(refs) {
const activeElement = useRef(null);
return (event) => {
const targetElement = event.currentTarget;
// remembers the first element that fires onscroll to align with other elements against it
if (targetElement && (activeElement.current === null || activeElement.current === targetElement)) {
requestAnimationFrame(() => {
activeElement.current = targetElement;
refs.forEach(ref => {
const element = ref.current;
if (element && element !== targetElement) {
element.scrollLeft = targetElement.scrollLeft;
}
});
// unblock the ability to scroll the synced elements
requestAnimationFrame(() => {
activeElement.current = null;
});
});
}
};
}
//# sourceMappingURL=index.js.map