CODEWITHSUNDEEP
reactjsviewport
David Abramov
David Abramov

Reputation: 53

How to change position of element if out of viewport?

I need to change position of element if it out of viewport. By default it's absolute, but when i scrolling (horizontal) parent div and this element is hiding i want to make it fixed. How to make it work? I heard about Observer but it's make my component flickering.

    const [position, setPosition] = useState('absolute')
    const deadlineRef = useRef(null)


    return (
    <Tooltip
        label={<TooltipLabel data={operationData} />}
        placement='top'
        hasArrow
    >
        <VStack
            position={position}
            mt='33px'
            gap={0}
            left={
                view === 'DAY'
                    ? `calc(${x * 100}% + 50px)`
                    : `calc(${x * 100}%)`
            }
            ref={deadlineRef}
        >
            <Icon
                w='12px'
                h='12px'
                as={RiSquareFill}
                
            />

        </VStack>
    </Tooltip>
)

Upvotes: 0

Views: 13

Answers (0)

Related Questions