Реагируйте на плавную прокрутку некорректно на мобильных устройствах - PullRequest
Новая
       145

Реагируйте на плавную прокрутку некорректно на мобильных устройствах

0 голосов
/ 26 мая 2020

Привет, я создаю веб-сайт с помощью React и Next. js, и я использую ссылку из реакции-прокрутки (используя Nav.Link из реакции bootstrap, чтобы сделать отзывчивую панель навигации) и после нажатия ссылки на каждую раздел, он отлично работает, когда он находится на экране компьютера, но когда он находится на мобильном телефоне / планшете, он не прокручивается в правильное положение.

Вот мой код для NavBar: 

            <Navbar className="navbar" fixed="top" sticky="top" collapseOnSelect expand="lg" bg="light" variant="light">
                <Navbar.Brand href="#">
                        <a
                            onClick={this.scrollToTop}>
                                veronika
                        </a>
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="navbar-nav ml-auto align-items-center">
                        <Nav.Link
                        eventKey="1" 
                        as={Link} 
                        className="nav-item"   
                        activeClass="active"
                        to="section1"
                        spy={true}
                        smooth={true}
                        duration= {500}> 
                            About
                        </Nav.Link>

                            <Nav.Link
                            eventKey="1" 
                            as={Link} 
                            className="nav-item"   
                            activeClass="active"
                            to="section2"
                            spy={true}
                            smooth={true}
                            duration= {500}
                            href="#section2">
                                Experience
                            </Nav.Link>


                        <Nav.Link  
                        eventKey="1" 
                        as={Link}   
                        className="nav-item" 
                        activeClass="active"
                        to="section3"
                        spy={true}
                        smooth={true}
                        duration= {500}
                        href="#section3">
                                Contact
                        </Nav.Link>

                    </Nav>
                </Navbar.Collapse>

                <style jsx global>{`



                .navbar{
                    background-color:white;
                    text-align: center;
                    position: sticky;
                    position: -webkit-sticky;
                    top:0;
                    z-index:1;
                    float:left;
                    box-shadow: 0 4px 2px -2px rgba(0,0,0,.2);
                }

                .nav-item{
                    list-style: none;
                    float: right;
                    color: black;
                    text-align: right;
                    padding: 14px 16px;
                    text-decoration: none;
                    font-size: 17px;
                }

                a:hover{
                    color:purple;
                }

                .nav-item:hover{
                    color: purple !important;
                    display: block !important;
                    text-decoration: none;
                }
                `}</style>
            </Navbar>

и мой код для разделов (каждый из них на данный момент одинаковый): 

            <div className="section1">
                <style jsx>{`
                    height:100vh;
                    background-position: center;
                    background-size: cover;
                    display: flex;
                    flex-flow: column;
                    justify-content: center;
                    align-items: center;
                    background-color: yellow;
                `}</style>
            </div>

Мне было интересно, можете ли вы изменить смещение компонента Link в зависимости от размера экрана, но я не совсем уверен, как это сделать.

...