1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

webviewでアンカーリンクが効かないのでjsで処理する

Posted at

経緯

webviewでアプリから目次があるwebページ開いた時に正しく動作しなかったので忘備録。
なんでアンカーリンクが効かないのかは分からないのでわかる方いたら教えてください。

HTML

<h2>目次</h2>
<h3>
  <a href='#1'>第一章</a>
</h3>
<ol>
  <li>
    <a href="#1-1">第1節</a>
  </li>
  <li>
    <a href="#1-2">第2節</a>
  </li>
</ol>

<h2><a id="1">第1章</a></h2>
<h3><a id="1-1">第1章 第1節</a></h3>
<h3><a id="1-2">第1章 第2節</a></h3>

webブラウザだと↑だけで正しくアンカーリンク先に遷移するんですが、
webviewだと動かないので、

解決策

const goToAnchor = event => {
  const target = event.target;
  const id = target.getAttribute('href').replace('#', '');
  document.getElementById(id).scrollIntoView();
  event.preventDefault();
};

document.querySelectorAll('a[href]').forEach(element => {
  element.addEventListener('click', goToAnchor);
});

scrollTo()だと動かないので、
scrollIntoView()

scrollToでいけるかなって思ったやつ

const goToAnchor = event => {
  const target = event.target;
  const id = target.getAttribute('href').replace('#', '');
  const elemY = document.getElementById(id).getBoundingClientRect().top + window.pageYOffset;
  scrollTo({
    top: elemY,
    behavior: 'auto'
  });
  event.preventDefault();
};

document.querySelectorAll('a[href]').forEach(element => {
  element.addEventListener('click', goToAnchor);
});

どっちもwebブラウザ上だと動くんだけど、webviewだとscrollIntoView()しか動かなかった。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?