いつもの100vhおもてたよりおっきい問題を忘れない
シーン遷移がバグってたので自戒のためメモ
シーン遷移が途中で止まっていて、なんでやろーと思って調べたらうっかりjs内でもcss内でも100vhで画面吸着シーン制御してた。シーンのinnerの内容が画面に内に収まってるのに100vh影響でwindow.heightをdivのclientHeightが超えて、シーン内のコンテンツ溢れててスクロールがあるみたいっすよ？と判定がおかしくなってた。 JavaScriptで画面サイズを取得・変更する方法 | UX MILK
https://uxmilk.jp/28500 スマホで100vhが見切れる問題の解決方法3つ – ゴリラドット
https://gorilla.dododori.com/972/
逆にhtmlにsetした変数–vhの値をトリたければgetPropertyValueする。（今回上フリック時に一瞬iOSでwindow.innerHeightが変わっていたので、–vhをつこた） CSSStyleDeclaration.getPropertyValue() – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/CSSStyleDeclaration/getPropertyValue
//--vh更新タイミングの調整(過去案件より)
//resizeで判定だとファーストビューから移動したときも毎度発動するのでガクガクする→回転もチェック
//orientationchangeで判定だと回転前の数値が取れる＆Androidがおかしい→resizeの中で回転を判定する
window.addEventListener('resize', function() {
if (Math.abs(window.orientation) !== orientation) {
fixViewHeightForVideo();
orientation = Math.abs(window.orientation);
}
あと上フリックがやりづらいとのことだったのでCSSでpull-down-to-refreshを無視させた
How to prevent pull-down-to-refresh in Mobile Chrome? – The Web Devhttps://thewebdev.info/2021/10/09/how-to-prevent-pull-down-to-refresh-in-mobile-chrome/
body だけじゃなくて htmlにもcssかけないと効かないのでお気をつけあれ。 Android の Chrome の Pull To Refresh (画面下方向へスワイプさせ、コンテンツを縦方向にオーバースクロールするとリロードするアレ) を無効化する方法 | かきしちカンパニー Web Magazine
https://www.webmagazine.kakisiti.co.jp/?p=666 overscroll-behavior-y – CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior-y
CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック | コリス
https://coliss.com/articles/build-websites/operation/css/prevent-scroll-chaining-overscroll-behavior.html
おまけ
シーンのinnerの内容が画面に内に収まってないときのスクロールしきったかの判定がサンプルコードに。scrollHeightべんり。こういうのあるから画面吸着シーンって嫌い。（しかも負の方向に移動してるときはまた別の判定が必要という・・・）Element.scrollHeight – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Element/scrollHeight
全然関係ないけど今見たら管理画面では入ってるwp:paragraphがフロントでは消えてる・・・。きっっも。また時間できたら調べよ
コメントを残す