Question

我制作了margin-top和padding-top，使内容位于顶部。

我的顶部栏的高度为50px。

margin-top: 50px;

它在台式机和chrome移动模拟器中都能很好地工作。

但是不幸的是，它在真实设备中看起来并不好。

请检查以下网址（视频剪辑）：a bit scrolled

内容高度不固定，取决于孩子。

因此需要一个滚动条，它会自动滚动。

但是在实际设备中，当我第一次输入url时，它会在边距和内边距上滚动一下，因此某些内容部分被顶部栏隐藏了。

需要认真的帮助。

我现在正在尝试使用scrollTop（0,0），但是它不起作用。

class QuizQuestion extends Component{

  constructor(props){
    super(props);
    this.myRef = React.createRef()
  }

  componentDidMount() {
    console.log(this.myRef.current)
    this.myRef.current.scrollTo(0, 0);
  }

  render() {
    return (
      <Box
        display="flex"
        flexDirection="column"
        justifyContent="center"
        alignItems="center"
        height="100vh"
        className="quiz-question"
        style={{
          opacity: this.props.active ? 1 : 0,
          transition: 'opacity 400ms ease-in-out',
          pointerEvents: this.props.active ? 'all' : 'none',
          position: 'absolute',
          // marginTop: -APP_BAR_HEIGHT,
          marginTop: `calc(${APP_BAR_HEIGHT} + 20px)`,
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          transitionDelay: 200,
          background: `linear-gradient(180deg, #23A2BE 0%, #0097B6 100%)`,
          height: 'fit-content', 
          minHeight: `100vh`
        }}>
          <Grid container style={{height: '100%'}}>
            <Grid item md={8} sm={12} xs={12} className="quiz-container" ref={this.myRef}>
              {this.props.question.heading && (
                <h2 className="quiz-quesion__heading__text">{this.props.question.heading}</h2>
              )}
              {this.props.children}
            </Grid>
            <Grid item md={4} sm={12} xs={12} className="quiz-question__back">

            </Grid>
          </Grid>
      </Box>
    )
  }
}

css

.quiz-question__back {
    background-image: url(/images/girl-smile.png);
    background-position: 70% 0;
    background-repeat: no-repeat;
    background-size: cover;
}

.quiz-container {
    background: white;
    padding: 100px 50px 0 50px;
}

.quiz-quesion__heading__text {
    color: #301EA1;
    font-size: 36px;
}

@media only screen and (max-width: 960px) {
    .quiz-question__back {
        display: none;
    }
    .quiz-container {
        padding: 50px 16px 0 16px;
    }
    .quiz-quesion__heading__text {
        font-size: 24px;
    }
}

如何修复自动滚动？

0 个答案: