Question

但我有一个问题。我是在Matrial ui的Dialog组件上使用，滚动在身体上工作，而不是在对话框上。

var Link = Scroll.Link;
var Element = Scroll.Element;
var Events = Scroll.Events;
var scrollSpy = Scroll.scrollSpy;
componentDidMount() {       

        Events.scrollEvent.register('begin', function (to, element) {
            console.log("begin", arguments);
        });

        Events.scrollEvent.register('end', function (to, element) {
            console.log("end", arguments);
        });

        scrollSpy.update();

   }
 componentWillUnmount(){
        Events.scrollEvent.remove('begin');
        Events.scrollEvent.remove('end');
    }
public render() { 

        return (

<div>
 <Link activeClass="active" to="upload" spy={true} smooth={true} duration={500}>Upload</Link>
<Element name="upload">
   <UploadZone onupload={this.props.onCreateDocument} onsuccessupload={this.uploadedfile} lastfileupload={this.props.lastuploadfile} clickable={true} />   
 </Element>


</div>

） }

我在应用程序组件的对话框中调用此组件，即父组件

所以我想滚动一个对话框，而不是身体..你能帮助我吗？

Answer 1

检查“ containerId”属性。 ID名称应添加到负责滚动的容器中。如果是Material-ui的对话框-DialogContent组件。

Answer 2

您需要使用 @Demiurg77 所说的 containerId 道具。我尝试使用纸张滚动模式，下面的代码对我有用。

<Dialog fullWidth={true} maxWidth={'lg'} onClose={handleClose} aria-labelledby="customized-dialog-title"
        open={open} scroll={'paper'}>
    <DialogTitle id="customized-dialog-title" onClose={handleClose}>
        Settings
    </DialogTitle>
    <Link className={section1} to={section1} spy={true} smooth={true} duration={250} containerId={'dialogCon'}>To Section 1</Link>
    <DialogContent id='dialogCon'>
        <DialogContentText id={section1}>
            <Typography gutterBottom>
                Some Text
            </Typography>
        </DialogContentText>
    </DialogContent>
</Dialog>

在对话框素材ui上反应滚动

2 个答案: