HTML Поле выбора нескольких групп повторно центрирует рамку вокруг текущего выделения при выборе указанной опции c

Question

Я использовал HTML многогрупповое поле выбора, как показано ниже. Обратитесь к следующему скрипачу для кода https://jsfiddle.net/nsandaruwa/tj1f2gyx/18/

При выборе определенной опции c в поле выбора. Поскольку я использовал функцию scrollIntoView, кадр повторно центрируется на текущем выборе. Такое поведение раздражает пользователя, когда дело касается взаимодействия с пользователем. Я хочу, чтобы в этом окне выбора нескольких групп не было прокрутки при выборе параметра c.

есть ли какая-либо функция для достижения такого поведения?

HTML:

<select multiple="" class="form-control select-checkbox" size="5">
<optgroup label="One">
  <option>Dog</option>
  <option>Cat</option>
  <option>Hippo</option>
  <option>Dinosaur</option>
  <option>Another Dog</option>
</optgroup>
  <optgroup label="Two">
  <option>Dog</option>
  <option>Cat</option>
  <option>Hippo</option>
  <option>Dinosaur</option>
  <option>Another Dog</option>
</optgroup>
<optgroup label="Three">
  <option>Dog</option>
  <option>Cat</option>
  <option>Hippo</option>
  <option>Dinosaur</option>
  <option>Another Dog</option>
</optgroup>
</select>

CSS:

body {
  padding: 15px;
}

.select-checkbox option::before {
  content: "\2610";
  width: 1.3em;
  text-align: center;
  display: inline-block;
}
.select-checkbox option:checked::before {
  content: "\2611";
}

Jquery:

$('option').mousedown(function(e) {
    e.preventDefault();
    const that = this;
    $(this).prop('selected', $(this).prop('selected') ? false : true);
    setTimeout(function() { that.scrollIntoView() },10)
    return false;
});

Answer 1

$('option').mousedown(function(e) {
    e.preventDefault();
    var originalScrollTop = $(this).parent().parent().scrollTop();
    $(this).prop('selected', $(this).prop('selected') ? false : true);
    var self = this;
    $(this).parent().parent().focus();
    setTimeout(function() {
        $(self).parent().parent().scrollTop(originalScrollTop);
    }, 0);

    return false;
});

URL-адрес скрипта для решения https://jsfiddle.net/nsandaruwa/0sphnk5z/1/