ios_safari_open_from_app.js

import { debounce } from "lodash";

class Index extends React.Component {
  static async getInitialProps({ query }) {
    return query;
  }

  state = {
    documentScrolled: false,
    brandingReady: false
  };

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

  // scrollBody() {
  //   window.scrollTo(0, 100);
  // }
  componentDidMount() {
    console.log(this.refOne.current);
    console.log(document);
    this.setState({
      windowScrollY: window.scrollY,
      windowInnerHeight: window.innerHeight,
      screenHeight: window.screen.height,
      documentScrollTop: document.documentElement.scrollTop,
      documentHeight: document.documentElement.clientHeight
    });
    setTimeout(() => {
      if (document.documentElement.clientHeight - window.innerHeight > 0) {
        document.body.style.height = `${window.innerHeight}px`;
      }
      this.setState({ brandingReady: true });
    }, 100);
    const handleOverScroll = debounce(() => {
      if (window.scrollY > 0) {
        window.scroll({
          top: 0,
          left: 0
        });
      }
    }, 100);
    document.addEventListener("scroll", handleOverScroll);
  }

  render() {
    // return <IndexComponent {...this.props} />;
    return (
      <div ref={this.refOne}>
        <div
          className="header"
          style={{
            position: "absolute",
            left: 0,
            right: 0,
            top: 0,
            height: 300,
            backgroundColor: "white",
            display: "flex",
            justifyContent: "flex-end",
            alignItems: "center",
            flexDirection: "column",
            zIndex: 10
          }}
        >
          <div>{`document was scrolled: ${this.state.documentScrolled}`}</div>
          <div>{`windowScrollY: ${this.state.windowScrollY}`}</div>
          <div>{`windowInnerHeight: ${this.state.windowInnerHeight}`}</div>
          <div>{`screenHeight: ${this.state.screenHeight}`}</div>
          <div>{`documentScrollTop: ${this.state.documentScrollTop}`}</div>
          <div>{`documentHeight: ${this.state.documentHeight}`}</div>
        </div>
        <div
          onScroll={this.scrollBody}
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            overflowX: "hidden",
            overflowY: "scroll",
            WebkitOverflowScrolling: "touch"
          }}
        >
          <div
            style={{
              height: "4000px",
              backgroundImage:
                "url(https://pbs.twimg.com/media/D6UmreTXkAAVfI3.jpg)",
              backgroundPosition: "center",
              backgroundRepeat: "repeat"
            }}
          ></div>
        </div>
        <div
          className="footer"
          style={{
            position: "absolute",
            left: 0,
            right: 0,
            bottom: 0,
            height: 50,
            transform: `translateY(${this.state.brandingReady ? 0 : 100}px)`,
            transition: "transform 500ms",
            backgroundColor: "white",
            display: "flex",
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          Footer
        </div>
      </div>
    );
  }
}