0
170
ViewsScroll to id not working in Fullscreen mode
I have created a script to enable/disable the full screen in web page (React JS). In 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.
1 answers
Answer question0
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.
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.