diff --git a/src/FilteredActionList/FilteredActionList.tsx b/src/FilteredActionList/FilteredActionList.tsx index 1d48f150e71..b75590b9328 100644 --- a/src/FilteredActionList/FilteredActionList.tsx +++ b/src/FilteredActionList/FilteredActionList.tsx @@ -11,6 +11,7 @@ import {itemActiveDescendantClass} from '../ActionList/Item' import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate' import styled from 'styled-components' import {get} from '../constants' +import useScrollFlash from '../hooks/useScrollFlash' export interface FilteredActionListProps extends Partial>, ListPropsBase { loading?: boolean @@ -121,6 +122,8 @@ export function FilteredActionList({ } }, [items]) + useScrollFlash(scrollContainerRef) + return ( diff --git a/src/hooks/useScrollFlash.ts b/src/hooks/useScrollFlash.ts new file mode 100644 index 00000000000..c79300a6ab3 --- /dev/null +++ b/src/hooks/useScrollFlash.ts @@ -0,0 +1,21 @@ +import React, {useEffect} from 'react' +/** + * This hook will flash the scrollbars for a ref of a container that has scrollable overflow + * @param scrollContainerRef The ref of the scrollable content + */ +export default function useScrollFlash(scrollContainerRef: React.RefObject) { + // https://adxlv.computer/projects/flash-scrollers/ + useEffect(() => { + const scrollContainer = scrollContainerRef.current + if (!scrollContainer) { + return + } + const currentScroll = scrollContainer.scrollTop + const maxScroll = scrollContainer.scrollHeight + + const altScroll = currentScroll < Math.min(1, maxScroll) ? currentScroll + 1 : currentScroll - 1 + + scrollContainer.scrollTop = altScroll + scrollContainer.scrollTop = currentScroll + }, [scrollContainerRef]) +}