時刻フィールドのドロップダウンリストスクロール

kintone カスタマイズ
1

新規作成時に、時刻フィールドの初期値がない場合、ドロップダウンリストが「0:00」～表示されますが、「8:00」～で表示したいです。

scrollIntoViewを使って、カスタマイズしましたが、
ドロップダウンリストだけでなく、スクロール領域全てがスクロールしてしまい、うまくいきません。
Reactを使っても構いませんので、アドバイス、実例があれば、ご教授下さい。
宜しくお願い致します。

実行したコード

(function() {
  'use strict';

  kintone.events.on([
    'app.record.create.show'
    ], function(event) {
      const tarfieldCode = '時刻';
      const FORM_DATA = cybozu.data.page['FORM_DATA'];
      const ELEMENT_FIELD_ID = {};
      const fieldList = FORM_DATA.schema.table.fieldList;
      // 全てのフィールドコード
      for (let fieldId in fieldList) {
        ELEMENT_FIELD_ID[fieldList[fieldId].var] = fieldId;
      }
      // 対象フィールド取得
      setTimeout(() => {
        const timeField = document.querySelector(`.value-${ELEMENT_FIELD_ID[tarfieldCode]} input`);

        timeField.addEventListener("focus", () => {
          // 値が入力されている場合、処理しない
          if (timeField.value !== "") return;
          setTimeout(() => {
            const selectlist = document.querySelector('.goog-menu-vertical');
            const items = selectlist.querySelectorAll('.goog-menuitem-content');
            const target = Array.from(items).find(el => el.textContent.trim() === '9:00');
            // スクロールさせる
            if (target) {
               target.scrollIntoView({ block: 'center', behavior: 'auto' });
            }
          }, 400);
        });  //addEventListener
	    }, 1000);
      return event;
  });
})();
2

※この回答には非推奨のDOM操作を含むことを先にお伝えしておきます。

Element.scrollIntoView() というメソッド、初めて知ったんですがめっちゃ便利ですね。

とはいえ 画面上の目的の場所にその要素を表示するため のメソッドなので、祖先の要素も勝手にスクロールしてしまうっぽいですね。なので、スクロールする対象の要素を自分で決定しないといけないっぽいです。

幸い、構造がシンプルなので自前で座標が計算できそうです。

この部分を

// スクロールさせる
if (target instanceof HTMLDivElement) {
	selectlist.scrollBy({ top: target.offsetTop - (selectlist.clientHeight - target.clientHeight) / 2 });
}

こんな感じで書けば真ん中に表示されると思います。

3

ありがとうございます。下記の修正で何とかなりました。
const parent = target.parentNode;
if (target instanceof HTMLDivElement) {
selectlist.scrollTop = parent.offsetTop;
}

「いいね！」 1
4

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。