Question

我实际上是在为IOS设备中的滚动问题寻找一个干净的解决方案。在我的App.js中，我只是背景主体和带有某些内容的模态。当显示模态时，我想在后台阻止滚动（myBodyContent），但仍允许模态组件中滚动。我对javascript和React都是新手，这对我毫无帮助。

我能找到的最干净的解决方案（根据我的看法）是body-scroll-lock package，但看来我无法成功使用它。这是我的代码：

App.js

class App extends Component {

      targetRef = React.createRef();
      targetElement = null;
    
      constructor(props) {
        super(props);
      }
      
      componentDidMount() {    
            this.targetElement = this.targetRef.current;
            disableBodyScroll(this.targetElement);
      } 

render() {

    const myModal = (
        <Modal ref={this.targetRef}>
          // my long content here
        </Modal>);

return (
      <React.Fragment>
        {myModal} 
          <Layout>
            <myBodyContent>
          </Layout>
      </React.Fragment>
    );
  }
}

Modal.js

class Modal extends Component {


    shouldComponentUpdate(nextProps, nextState){
        return (nextProps.show !== this.props.show)
    }

    render () {
        return (
            <div>
            <Auxi>
                <Backdrop
                    show = {this.props.show}
                    clicked = {this.props.modalClosed}
                />
                <div className={style.Modal}
                style={{
                    transform: this.props.show ? 'translateY(0)' : 'translateY(-100vh)', // vh is special unit for outside screen
                    opacity: this.props.show ? '1': '0'
                }}>
                    {this.props.children}
                </div>
            </Auxi>
            </div>
        );
    }
}

模态CSS

.Modal {
    position: fixed;
    z-index: 500;
    background-color: white;
    width: 80%;
    overflow-y: hidden;
    overflow: auto;
    padding-right: 15px; /* Avoid width reflow */
    border: 1px solid #ccc;
    box-shadow: 1px 1px 1px black;
    padding: 16px;
    top: 5%;
    left: 5%;
    box-sizing: content-box;
    transition: all 0.3s ease-out;
}

@media (min-width: 600px) {
    .Modal {
        width: 80%;
        height: 80%;
        left: 10%;
        top: 10%
    }
}

使用上面的代码，只是一切都被锁定了，我无法滚动模态或myBodyContent。

您能帮助我了解我在做什么吗？还是建议我一些其他方法来达到相同的结果？

预先感谢您的帮助。

Answer 1

在应用程序 componentDidMount 中没有 targetElement （它为空），因为您尝试为React组件而不是HTML元素设置引用。

要解决此问题，您需要像这样在Modal组件内部转发ref：

const myModal = (
  <Modal forwardedRef={this.targetRef}>
    // my long content here
  </Modal>
);

然后：

class Modal extends Component {


    shouldComponentUpdate(nextProps, nextState){
        return (nextProps.show !== this.props.show)
    }

    render () {
        return (
            <div ref={this.props.forwardedRef}>
            <Auxi>
                <Backdrop
                    show = {this.props.show}
                    clicked = {this.props.modalClosed}
                />
                <div className={style.Modal}
                style={{
                    transform: this.props.show ? 'translateY(0)' : 'translateY(-100vh)', // vh is special unit for outside screen
                    opacity: this.props.show ? '1': '0'
                }}>
                    {this.props.children}
                </div>
            </Auxi>
            </div>
        );
    }
}

Answer 2

感谢Max，我已经尝试过，但是不幸的是结果是一样的。我也尝试过将Modal直接封装在App.js中的div中，并直接在其中应用ref而不将其作为props传递...但这是相同的。无法滚动任何内容。

在iOS上反应主体滚动锁定问题

2 个答案: