[ 解決済 ] アップルOS以外のchromeにおけるタッチデバイスのスムーススクロール不具合

[t-oku]

■ WordPress のバージョン
6.8

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

■ テーマの種類
X-T9

■ テーマのバージョン
1.32.0

■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。

■ プラグインの種類・バージョン
VK All in One Expansion Unit
バージョン 9.107.1.1
VK Block Patterns
バージョン 1.33.1.2
VK Blocks
バージョン 1.102.0.1

■ 期待する動作
スマホ等タッチデバイスにおいて、ナビゲーションに設定したリンクから、同ページ内のアンカーリンクへ遷移させたい。

■ 自分で試した事
同じナビゲーションに設定したリンクでも、PC表示では、正しく動く。
アップルOS上のchromeやsafariでは正しく動くことは確認。
Expansion Unitのスムーススクロールタイプは、JavaScript／CSSのみ、どちらを選択しても症状は変わらず。

X-t9で制作中のサイトが２つあり、少々プラグインの環境も違っているので、それぞれ試したが、症状は同じ。

■ 症状が発生するブラウザ
androidのchrome、Windowsのchrome

■ 実際の症状
ナビゲーションに設定したリンクを押すと、ページトップで固まり、指定のアンカーまでスクロールせずに止まってしまう。
遷移したいリンク先が、現ページから見て別ページのアンカーの場合は正しくページが切り替わりアンカーまでスクロールしていくが、現ページと同ページのアンカーの場合はページトップまで切り替わって止まる。

Windowsのchrome検証ツールで、見ると以下のメッセージ。

main.js:417 [Violation] Added non-passive event listener to a scroll-blocking ‘touchmove’ event. Consider marking event handler as ‘passive’ to make the page more responsive.

[石川＠Vektor,Inc.]

弊社製品のご利用ありがとうございます。株式会社ベクトルの石川と申します。

該当のサイトURLか同じ症状を発生させたテストサイトなどのURLを貼っていただけると確認がしやすいです。

[t-oku]

失礼しました。

例えば、こちらの制作中のサイトです。
https://hiraku-kasei.com/nwp/
（パスワード：test-250324）

メニューについて「業務内容」ページ内のアンカーリンクが「設備情報」という関係性です。

[石川＠Vektor,Inc.]

PCでのメニューではなくモーダルメニューの事でしょうか？

[t-oku]

そうですね。
モバイルの場合でも、モーダルメニューではうまく動きませんが、フッターナビゲーションからは正常に動作しています。

よろしくお願いいたします。

[うなこ]

お世話になっております。

モーダルメニューを使用している場合に、iOS以外の環境で同一ページ内のリンクが正常に動作しない件について、
一度ご確認いただきたいことがございます。

以下のCSSを【外観】→【カスタマイズ】→【追加CSS】に貼り付けていただき、
同一ページ内のリンクが正常に動作するかご確認いただけますでしょうか。

html.has-modal-open body{
	overflow-x: visible;
}

[t-oku]

うなこさん、ありがとうございます。

ご教示いただいたCSSによって、正常な動作が得られました。

モーダルの背景でのスクロールが止められていた、ってことですね。
なぜ横スクロールで？と理解は着いていってませんが💦

[うなこ]

ご確認ありがとうございます。

なぜ横スクロールで？と理解は着いていってませんが💦

こちらについて補足させていただきます。

元々、X-T9テーマでは、意図しない横スクロールバーの表示、たとえばmargin-left: calc(50% – 50vw) などのネガティブマージンで横スクロールが発生するのを防ぐため、bodyに overflow-x: hidden; を設定していました。

ただ、この overflow-x: hidden; の影響で、モーダルメニューオープン時に、同一ページ内のリンク（アンカーリンク）へ正常にジャンプできないケースが今回判明しました。

先ほどのCSSは、モーダルメニューが開いている間だけbodyのoverflow-xを visible に上書きすることで、ページ内リンクのジャンプが正常に動作するように調整しています。

なお、この対応は、X-T9テーマの次回バージョンで修正を予定しておりますので、テーマが更新されましたら追加CSSの適用は不要となります。

X-T9のプルリク
https://github.com/vektor-inc/x-t9/pull/337

少しややこしい背景となっており恐縮ですが、どうぞよろしくお願いいたします。

[t-oku]

なるほど。ありがとうございます。

iphone、androidで動作確認できましたが、スムーススクロールにはなりませんね。

[うなこ]

返信ありがとうございます。
ExUnitの【メイン設定】> 【スムーススクロール】のスムーススクロールタイプを「CSSのみ ( 読み込みが少し軽くなりますが、Safari では動作しません。 )」を選択して「変更を保存」するといかがでしょうか？

[t-oku]

ありがとうございます。
CSSを選択することで、スムーススクロールになりました。

[t-oku]

追記：iphone、android、どちらでもスムーススクロールになりました。

[投稿者]

投稿