Scroll to id not working in Fullscreen mode

user_10417017 0
Viewed 414

I have created a script to enable/disable the full screen in web page (React JS). On the web page on click button web page scrolls to top. Scroll to top is working fine in normal web page but when full screen is enabled scroll is not working. Also, I used the scrollToElement React JS package for scrolling but this is also not working.

import React from 'react';
import {FullScreen, useFullScreenHandle}

export const A = () => {
 /* Click handler to enable the scroll to root*/
 handleClick = () => {
   window.scrollTo( 0, 0)
}
 return (<FullScreen handle={handle}>
    <button onclick={ () => handleClick() }>Scroll To Top</button>
</FullScreen>)
}
    
In Fullscreen scroll is not working.
react-virtualized reactjs javascript
1 Answers

The third-party library used react-full-screen has an implementation where when the FullScreen Component goes to fullscreen it sets the containing div to height: 100% without overflow: auto/scroll.

Thus, the element takes the fullscreen and the content overflows without scroll. So, we need to set the overflow correctly and set the scroll function to the containing div instead of body.

enter image description here

This div is the containing element when fullscreen is activated over it by the package.

Check out the implementation here. Open the preview in a new tab for fullscreen to work properly.

user_131928340
Related