0

我真的在努力寻找一个干净的解决方案来解决 IOS 设备中的滚动问题。在我的 App.js 中，我只有背景主体和带有一些内容的模式。当显示模态时，我想阻止背景中的滚动（myBodyContent），并且仍然让模态组件中的滚动。我对 javascript 和 React 都很陌生，这对我一点帮助都没有。

我能找到的最干净的解决方案（据我所知）是body-scroll-lock 包，但似乎我无法成功使用它。这是我的代码：

应用程序.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>
    );
  }
}

模态.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。

你能帮我理解我做错了什么吗？或者建议我用其他方法来达到同样的效果？

在此先感谢您的帮助。

4

2 回答 2

0

谢谢 Max，我试过了，但不幸的是结果是一样的。我还尝试将 Modal 直接包含在 App.js 中的 div 中，并直接在其中应用 ref 而不将其作为道具传递......但它是一样的。没有办法滚动任何东西。

于 2020-09-12T10:46:08.960 回答
0

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

要解决此问题，您需要像这样在 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>
        );
    }
}
于 2020-09-12T10:19:17.707 回答