search

rafgraph / react-router-hash-link

Hash link scroll functionality for React Router
https://react-router-hash-link.rafgraph.dev
MIT License
732 stars 62 forks source link

Issue with mobile #78

Closed letto4135 closed 3 years ago

letto4135 commented 3 years ago

On landscape iPhone X it works fine, on portrait mode the library does not work. Same with iphone 6/7/8. iPad it works fine, but it's like once the screen is too small it stops working. Using current version of chrome with developer tools, and chrome/safari on iPhone 8 with same results.

Any assistance would be appreciated.

The offending code.

import { HashLink as Link } from 'react-router-hash-link';
<li className="nav-item">
    <Link scroll={el => el.scrollIntoView({ behavior: 'smooth', block: 'center' })}
          className="nav-link" to="/#campOptions">
        <h5>Camp Options</h5>
    </Link>
</li>
<li className="nav-item">
    <Link scroll={el => el.scrollIntoView({ behavior: 'smooth', block: 'center' })}
          className="nav-link" to="/#activities">
        <h5>Activities</h5>
    </Link>
</li>
<li className="nav-item">
    <Link scroll={el => el.scrollIntoView({ behavior: 'smooth', block: 'center' })}
          className="nav-link" to="/#campMaps">
        <h5>Directions</h5>
    </Link>
</li>
letto4135 commented 3 years ago

JK, its not an issue with this library, its something else. I tested it with a regular anchor tag but now I'm more confused on the issue...