diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.test.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.test.tsx index 022e1db19c..e82b75b188 100644 --- a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.test.tsx +++ b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.test.tsx @@ -19,11 +19,6 @@ const setup = (element: HTMLElement, startScrollLeft = 0) => { jest.spyOn(element.firstElementChild!, 'scrollWidth', 'get').mockImplementation(() => 500); - // @ts-expect-error: TS2322 есть другой тип, но в компоненте он не используется - element.scrollBy = (options?: ScrollToOptions) => { - scrollLeft = scrollLeft + (options?.left || 0); - }; - return { get scrollLeft() { return scrollLeft; @@ -195,39 +190,6 @@ describe('HorizontalScroll', () => { expect(mockedData.scrollLeft).toBe(200); }); }); - - it('scroll by arrow', () => { - const ref: React.RefObject = { - current: null, - }; - render( - -
- , - ); - - const mockedData = setup(ref.current!, 50); - - fireEvent.mouseEnter(screen.getByTestId('horizontal-scroll')); - - const arrowLeft = screen.getByTestId('scroll-arrow-left'); - const arrowRight = screen.getByTestId('scroll-arrow-right'); - - fireEvent.wheel(arrowRight, { - deltaX: 20, - }); - expect(mockedData.scrollLeft).toBe(70); - - fireEvent.wheel(arrowLeft, { - deltaX: 20, - }); - expect(mockedData.scrollLeft).toBe(90); - }); }); function mockRef(element: HTMLDivElement) { diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx index 70c2ff084e..d1ba450c8a 100644 --- a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx +++ b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx @@ -178,7 +178,6 @@ export const HorizontalScroll = ({ scrollOnAnyWheel = false, prevButtonTestId, nextButtonTestId, - getRootRef, ...restProps }: HorizontalScrollProps): React.ReactNode => { const [canScrollLeft, setCanScrollLeft] = React.useState(false); @@ -192,8 +191,6 @@ export const HorizontalScroll = ({ const scrollerRef = useExternRef(getRef, directionRef); - const rootRef = useExternRef(getRootRef); - const animationQueue = React.useRef([]); const hasPointer = useAdaptivityHasPointer(); @@ -250,31 +247,40 @@ export const HorizontalScroll = ({ useIsomorphicLayoutEffect( function addWheelEventHandler() { - if (!rootRef.current) { + const scrollEl = scrollerRef.current; + if (!scrollEl) { return noop; } /** * Прокрутка с помощью любого колеса мыши */ const onWheel = (e: WheelEvent) => { - const left = e.deltaX + (scrollOnAnyWheel ? e.deltaY : 0); - scrollerRef.current!.scrollBy({ left, behavior: 'auto' }); - if (e.deltaY && scrollOnAnyWheel) { - e.preventDefault(); - } + scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' }); + e.preventDefault(); }; + const listenerOptions = { passive: false }; - rootRef.current?.addEventListener('wheel', onWheel, listenerOptions); - // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства - return () => rootRef.current?.removeEventListener('wheel', onWheel, listenerOptions); + + if (scrollOnAnyWheel) { + scrollEl.addEventListener('wheel', onWheel, listenerOptions); + } + scrollEl.addEventListener('scroll', calculateArrowsVisibility, listenerOptions); + + return () => { + if (scrollOnAnyWheel) { + // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства + scrollEl.removeEventListener('wheel', onWheel, listenerOptions); + } + // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для scroll нет passive свойства + scrollEl.removeEventListener('scroll', calculateArrowsVisibility, listenerOptions); + }; }, - [rootRef, scrollOnAnyWheel, scrollerRef], + [scrollOnAnyWheel, calculateArrowsVisibility, scrollerRef], ); return ( )} -
+
{children}