Scrapboxの編集画面でiOSのソフトキーボードを出すとあさっての方向にスクロールする問題をなんとかするユーザースクリプト

ちょっとだけタイトルをマシにしました。

--

あさっての方向というか、ちゃんと規則はあるんですけど、とにかく思ったところにスクロールしません。iPhoneでScrapboxの編集がしづらい一番の原因はこれです。
これをなんとかするUserScriptを書きました。

↓ 来てほしいところにスクロールするようになります。

ハードウェアキーボードは使っていないので動作テストはしていませんが、テキストボックスにフォーカスが当たったことを検出してスクロール位置の修正を発動させるスクリプトですので、おそらく同様の動作になるのではないかと思います。

動作確認済み

  • Safari
  • Chrome
  • Opera mini → 若干心許ない動作

コード

code:script.js
    (function(){
    // このスクリプトをオン・オフする
    const this_script = 'on';
    // スクリプトを有効にするデバイス
    const device_list = ['iPhone', 'iPad', 'iPod'];
    // スクロール後のカーソル位置(表示領域上端からのピクセル数)
    const offset_iphone = 100;
    const offset_ipad = 150;
    const offset_ipod = 100;
    
    function main() {
        let offset;
        if (/ipod/i.test(user_agent)) {
            offset = offset_ipod;
        } else if (/ipad/i.test(user_agent)) {
            offset = offset_ipad;
        } else {
            offset = offset_iphone;
        }
        try {
            $('#text-input')[0].addEventListener('DOMFocusIn', () => {
                setTimeout(() => {
                    const y_cursor = $('.cursor').offset().top;
                    $('html,body').animate(
                        { scrollTop: y_cursor - offset },
                        { duration: 'fast', queue: false }
                    );
                }, 10);
            }, false);
        } catch(e) {
            setTimeout(main, 1000);
        }
    }
    
    const reg = new RegExp(device_list.join('|'), 'i');
    const user_agent = navigator.userAgent;
    if (this_script === 'on' && reg.test(user_agent)) {
        main();
    }
    })();

導入の手順

  1. ScrapboxのUserScriptの機能を有効にする
    Scrapboxの右上のMenu -> Edit Profile -> Extensionタブ
    と進み、User ScriptのEnabledにチェックを入れる

  2. コードを「自分のページ」に貼り付ける

「自分のページ」って何だ?という方はこちらを参照。
自分のページ - 橋本商会

設定できる項目

コードの先頭あたりにあります。

// このスクリプトをオン・オフする
const this_script = 'on';
// スクリプトを有効にするデバイス
const device_list = ['iPhone', 'iPad', 'iPod'];
// スクロール後のカーソル位置(表示領域上端からのピクセル数)
const offset_iphone = 100;
const offset_ipad = 150;
const offset_ipod = 100;


他にこんな記事を書きました。

スポンサーリンク
スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。