Ionic Angular: Make ionic picker scroll both ways

Question

I am using the ion-picker component in my software platform. However you can only seem to scroll 1 way and not the other way. My picker is for time so if I want to select the 55th minuet in an hour I/users have to scroll all the way through instead of just scrolling the shortest way.

Is this possible? See my current implementation below:

async presentPicker(field = '', isFlightTime = false, flightTimeType = '') { const hhmm = (this.usrPref.userPrefs.timeUnitHHMM).toString();

const hourNormal = {
  name: 'hour',
  options: [
    {text: '00', value: '00'},
    {text: '01', value: '01'},
    {text: '02', value: '02'},
    {text: '03', value: '03'},
    {text: '04', value: '04'},
    {text: '05', value: '05'},
    {text: '06', value: '06'},
    {text: '07', value: '07'},
    {text: '08', value: '08'},
    {text: '09', value: '09'},
    {text: '10', value: '10'},
    {text: '11', value: '11'},
    {text: '12', value: '12'},
    {text: '13', value: '13'},
    {text: '14', value: '14'},
    {text: '15', value: '15'},
    {text: '16', value: '16'},
    {text: '17', value: '17'},
    {text: '18', value: '18'},
    {text: '19', value: '19'},
    {text: '20', value: '20'},
    {text: '21', value: '21'},
    {text: '22', value: '22'},
    {text: '23', value: '23'},
  ]
};

const hourDecimal = {
  name: 'hour',
  options: [
    {text: '0', value: '0'},
    {text: '1', value: '1'},
    {text: '2', value: '2'},
    {text: '3', value: '3'},
    {text: '4', value: '4'},
    {text: '5', value: '5'},
    {text: '6', value: '6'},
    {text: '7', value: '7'},
    {text: '8', value: '8'},
    {text: '9', value: '9'},
    {text: '10', value: '10'},
    {text: '11', value: '11'},
    {text: '12', value: '12'},
    {text: '13', value: '13'},
    {text: '14', value: '14'},
    {text: '15', value: '15'},
    {text: '16', value: '16'},
    {text: '17', value: '17'},
    {text: '18', value: '18'},
    {text: '19', value: '19'},
    {text: '20', value: '20'},
    {text: '21', value: '21'},
    {text: '22', value: '22'},
    {text: '23', value: '23'},
  ]
};

const minNormal =
  {
    name: 'min',
    options: [
      {text: '00', value: '00'},
      {text: '01', value: '01'},
      {text: '02', value: '02'},
      {text: '03', value: '03'},
      {text: '04', value: '04'},
      {text: '05', value: '05'},
      {text: '06', value: '06'},
      {text: '07', value: '07'},
      {text: '08', value: '08'},
      {text: '09', value: '09'},
      {text: '10', value: '10'},
      {text: '11', value: '11'},
      {text: '12', value: '12'},
      {text: '13', value: '13'},
      {text: '14', value: '14'},
      {text: '15', value: '15'},
      {text: '16', value: '16'},
      {text: '17', value: '17'},
      {text: '18', value: '18'},
      {text: '19', value: '19'},
      {text: '20', value: '20'},
      {text: '21', value: '21'},
      {text: '22', value: '22'},
      {text: '23', value: '23'},
      {text: '24', value: '24'},
      {text: '25', value: '25'},
      {text: '26', value: '26'},
      {text: '27', value: '27'},
      {text: '28', value: '28'},
      {text: '29', value: '29'},
      {text: '30', value: '30'},
      {text: '31', value: '31'},
      {text: '32', value: '32'},
      {text: '33', value: '33'},
      {text: '34', value: '34'},
      {text: '35', value: '35'},
      {text: '36', value: '36'},
      {text: '37', value: '37'},
      {text: '38', value: '38'},
      {text: '39', value: '39'},
      {text: '40', value: '40'},
      {text: '41', value: '41'},
      {text: '42', value: '42'},
      {text: '43', value: '43'},
      {text: '44', value: '44'},
      {text: '45', value: '45'},
      {text: '46', value: '46'},
      {text: '47', value: '47'},
      {text: '48', value: '48'},
      {text: '49', value: '49'},
      {text: '50', value: '50'},
      {text: '51', value: '51'},
      {text: '52', value: '52'},
      {text: '53', value: '53'},
      {text: '54', value: '54'},
      {text: '55', value: '55'},
      {text: '56', value: '56'},
      {text: '57', value: '57'},
      {text: '58', value: '58'},
      {text: '59', value: '59'},

    ]
  };

const minDec = {
  name: 'min',
  options: [
    {text: '0', value: '0'},
    {text: '1', value: '1'},
    {text: '2', value: '2'},
    {text: '3', value: '3'},
    {text: '4', value: '4'},
    {text: '5', value: '5'},
    {text: '6', value: '6'},
    {text: '7', value: '7'},
    {text: '8', value: '8'},
    {text: '9', value: '9'},
  ]
};

let hour;
let min;

if (hhmm == '1' || isFlightTime) {
  hour = hourNormal;
  min = minNormal;
} else {
  hour = hourDecimal;
  min = minDec;
}

const picker = await this.pickerController.create({
  mode: "md",
  buttons: [
    {
      text: 'Confirm',
      handler: (selected) => {
        if (field) {
          if (hhmm == '1' || isFlightTime) {
            if (isFlightTime) {
              switch (flightTimeType) {
                case 'depTime':
                  this.contextDepTime = selected.hour.value + ':' + selected.min.value;
                  break
                case 'arrTime':
                  this.contextArrTime = selected.hour.value + ':' + selected.min.value;
                  break
                case 'depDutyTime':
                  this.contextDepDutyTime = selected.hour.value + ':' + selected.min.value;
                  break
                case 'arrDutyTime':
                  this.contextArrDutyTime = selected.hour.value + ':' + selected.min.value;
                  break
              }
            } else {
              this.flightData[field] = selected.hour.value + ':' + selected.min.value;
            }
          } else {
            this.flightData[field] = this.conversion.decToHM(parseFloat(selected.hour.value + '.' + selected.min.value));
          }
        }
      },
    }
  ],
  columns: [hour, min]
});
await picker.present();

}