diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx index 0651447f..dd3e6e1d 100644 --- a/frontend/src/conversation/ConversationTile.tsx +++ b/frontend/src/conversation/ConversationTile.tsx @@ -1,4 +1,10 @@ -import { SyntheticEvent, useEffect, useRef, useState } from 'react'; +import { + SyntheticEvent, + useEffect, + useRef, + useState, + useCallback, +} from 'react'; import { useSelector } from 'react-redux'; import Edit from '../assets/edit.svg'; import Exit from '../assets/exit.svg'; @@ -76,12 +82,33 @@ export default function ConversationTile({ }; }, []); + const preventScroll = useCallback((event: WheelEvent | TouchEvent) => { + event.preventDefault(); + }, []); + useEffect(() => { const conversationsMainDiv = document.getElementById( 'conversationsMainDiv', ); - conversationsMainDiv && - (conversationsMainDiv.style.overflowY = isOpen ? 'hidden' : 'auto'); + + if (conversationsMainDiv) { + if (isOpen) { + conversationsMainDiv.addEventListener('wheel', preventScroll, { + passive: false, + }); + conversationsMainDiv.addEventListener('touchmove', preventScroll, { + passive: false, + }); + } else { + conversationsMainDiv.removeEventListener('wheel', preventScroll); + conversationsMainDiv.removeEventListener('touchmove', preventScroll); + } + + return () => { + conversationsMainDiv.removeEventListener('wheel', preventScroll); + conversationsMainDiv.removeEventListener('touchmove', preventScroll); + }; + } }, [isOpen]); function onClear() {