PCでは効く横スクロールがスマホでは効かなくなってしまう

Question

前提・実現したいこと

カレンダー機能をdatetimepickerを使って作成しているのですが、
一番下の時間の部分をscrollにしても、
スマホでは効かなくなってしまいます。

該当のソースコード

<input type="text" id="target" readonly="readonly">

input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  font-size: 16px;
  transform: scale(calc(12 / 16));
}
.xdsoft_datetimepicker.xdsoft_noselect.xdsoft_ {
    display: block !important;
    width: 90%;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
    display: none;
}

.xdsoft_datetimepicker .xdsoft_datepicker.active, .xdsoft_datetimepicker .xdsoft_timepicker.active {
    float: none;
    width: 90%;
    margin: 0 auto;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div {
  overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;

}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div {
    border: none;

    flex: 0 0 auto;
    height: auto;
    border-right: 1px solid;
  display: inline-block;
      width: 20%;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
    height: auto;
     
}

.xdsoft_datetimepicker .xdsoft_year {
    width: 50%;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box .xdsoft_scrollbar {display: none;}

.xdsoft_scroller {
}

$(function() {
  $.datetimepicker.setLocale('ja'); // 日本語化
  $('#target').datetimepicker({
     step:15, // 10分刻み
    format: 'Y-m-d H:i',
    minDate: 0,
    minTime:'10:00',
    maxTime:'20:00',
    
  
  });
});

試したこと

スマホ用のwebkitを追加してみてもダメでした。
こちらもとは下記サイトにあるカレンダー
(https://on-ze.com/demo/jquery-datetimepicker/)
のデフォルトをもとに、
時間の部分だけ横スクロールにするため、cssで
色々customizeしております。

そのテストが　以下になります。
(https://codepen.io/satoru1993/pen/PopzrEQ)

何か解決方法があればご連絡いただけますと幸いです。

Answer 1

以下のようなことのようです。

iOS13でCSSでスクロールバー拡張できる::-webkit-scrollbarが使えなくなったよう | while(isプログラマ)

このプラグインは touchmove や wheel イベントをハックしているように見えますので、スクロールバーを触らないとスクロールできないようですが、iOSではスクロールバーが出せないため、スクロールさせる手段がない、ということなのではないかと思います。

参考にされたページのスクロールバーはxdsoft_scrollbarというクラスがついており、どうやらフェイクのスクロールバーのようです。
こちらのプラグインかなあ？という気がしますので、お調べになってはいかがですか？
perfect-scrollbar - jQuery Plugins

Comments

[satoru225Simple]

ありがとうございます！
調べてみたいと思います！