diff options
| author | Tulir Asokan <tulir@maunium.net> | 2020-09-05 18:50:40 +0300 |
|---|---|---|
| committer | Tulir Asokan <tulir@maunium.net> | 2020-09-05 18:50:40 +0300 |
| commit | eb6967fdb6b1024598f37ed4e9b1a94079758f5d (patch) | |
| tree | 7ea97a776f64da09523bdc518bc91911c7961f07 | |
| parent | de072dcd81de37e460e1c47906f377226fec436b (diff) | |
Add slightly hacky fix for scrolling to pack on Element iOS (ref #8)
| -rw-r--r-- | web/index.js | 12 |
1 files changed, 11 insertions, 1 deletions
diff --git a/web/index.js b/web/index.js index 921c591..1e5c625 100644 --- a/web/index.js +++ b/web/index.js @@ -16,6 +16,7 @@ let HOMESERVER_URL = "https://matrix-client.matrix.org" const makeThumbnailURL = mxc => `${HOMESERVER_URL}/_matrix/media/r0/thumbnail/${mxc.substr(6)}?height=128&width=128&method=scale` // We need to detect iOS webkit because it has a bug related to scrolling non-fixed divs +// This is also used to fix scrolling to sections on Element iOS const isMobileSafari = navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/) class App extends Component { @@ -119,8 +120,17 @@ class App extends Component { } } +// By default we just let the browser handle scrolling to sections, but webviews on Element iOS +// open the link in the browser instead of just scrolling there, so we need to scroll manually: +const scrollToSection = (evt, id) => { + const pack = document.getElementById(`pack-${id}`) + pack.scrollIntoView({ block: "start", behavior: "instant" }) + evt.preventDefault() +} + const NavBarItem = ({ pack }) => html` - <a href="#pack-${pack.id}" id="nav-${pack.id}" data-pack-id=${pack.id} title=${pack.title}> + <a href="#pack-${pack.id}" id="nav-${pack.id}" data-pack-id=${pack.id} title=${pack.title} + onClick=${isMobileSafari ? (evt => scrollToSection(evt, pack.id)) : undefined}> <div class="sticker"> <img src=${makeThumbnailURL(pack.stickers[0].url)} alt=${pack.stickers[0].body} class="visible" /> |