0
366
ViewsMaterial Ui, MUI, Dialog, ScrollTop
I was messing around alot with scrollTop and the Dialog component(A fullscreen fixed modal) from Material-Ui for some time... and I couldn't quite get scrollTop to work. When i click the go down button, It would always give me undefined or it wouldn't work at all in the scrollable container.
·
Juan Pablo Isaza
1 answers
Answer question0
All that was needed was needed
Make sure the div within the Dialog has overflow
<Dialog fullScreen open={open} onClose={handleClose}>
<div ref={ref}
//MOST IMPORTANT
style={{ backgroundColor: 'red', overflowY: 'auto', height: '100%' }}>
**And an onClick **
<Button
autoFocus
color="inherit"
//HERE
onClick={() => {
const div = ref.current;
div.scrollTop = 800;
}}
>GO DOWN
</Button>
Here's an example https://codesandbox.io/s/fullscreendialog-material-demo-forked-cf8u6?file=/demo.js:2201-2434
·
Juan Pablo Isaza
Report
Answer question