Перерывы при прокрутке анимированная прокрутка jQuery

Question

У меня есть представление прокрутки с обязательной привязкой прокрутки:

scroll-snap-type: y mandatory;

У меня также есть несколько кнопок, которые предоставляют ярлыки для различных элементов вида прокрутки. При нажатии кнопки я использую jQuery для анимации выбранного элемента в представлении:

$('#scroller').animate({ scrollTop:$('#scroller').scrollTop() + $(element).offset().top -$('#scroller').offset().top }, { duration: 'slow', easing: 'swing'});

Это отлично работает в Safari. Однако в Chrome и Firefox (Mac) кажется, что щелчок прокрутки нарушает функцию анимации jQuery. Вместо плавной прокрутки элемент просто неуклюже дергается. Если я уберу привязку прокрутки, она будет работать, как и ожидалось.

Я пытался быть умным и отключал привязку прокрутки при каждом нажатии кнопки, а затем снова включил ее при ручной прокрутке колесика мыши:

$('#scroller').on('wheel', function(e) {
  $('#scroller').css('scroll-snap-type', 'y mandatory');
});

Таким образом, я заставил его работать как в Safari, так и в Firefox. Но Chrome все равно не будет играть в мяч. Трюк вроде работает, но, как ни странно, только один или два раза. После нажатия кнопки кажется, что он просто игнорирует повторное включение прокрутки.

Есть идеи, как это исправить? Спасибо!

Демонстрация: https://codepen.io/gurgel/pen/yLLORar

РЕДАКТИРОВАТЬ: После прочтения этого поста я получил его работать во всех браузерах, используя этот polyscill smoothscroll . Я все еще предпочел бы решение ванили, хотя - это кажется так близко.

РЕДАКТИРОВАТЬ 2: Добавлен фрагмент за предложение:

$(document).ready(function() {
    
   $('#scroller').on('wheel', function(e) {
     /* This gets the scroll-snapping working again in Firefox, but not in Chrome */
  $('#scroller').css('scroll-snap-type', 'y mandatory');
  });               
  
  
});
  
  
function changeView(index) {
  
  /* Workaround to enable smooth scrolling in Chrome and Firefox  */
  $('#scroller').css('scroll-snap-type', 'none');
  
  var id = 'view ' + index;
  var element = document.getElementById(id);
 $('#scroller').animate({ scrollTop:      $('#scroller').scrollTop() + $(element).offset().top -$('#scroller').offset().top }, { duration: 'slow', easing: 'swing'});
}

#wrapper {
  height:100vh;
  width:50vw;
  overflow: hidden;
  display: flex;
  flex-direction:row;
}
#menu ul {
  list-style:none;
  padding:0 20px 0 0;
  cursor: pointer;
  width:60px;
}
#menu ul li {
  border:1px solid green;
}

#scroller {
  flex-grow:1;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  /* 
  This breaks the animated scrolling in Chrome/FF.
  */
}
.view {
  padding:10px;
  scroll-snap-align: start;
}




/* Irrelevant styling */
.view:nth-child(1) {
  background:#b3de81;
}
.view:nth-child(2) {
  background:#6eb5c0;
}
.view:nth-child(3) {
  background:#E94353;
}
.view:nth-child(4) {
  background:#faaf08;
}
.view:nth-child(5) {
  background:#CFA4DB;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  
  <div id="menu">
  	<ul>
    	<li onclick="changeView(1)">1</li>
  		<li onclick="changeView(2)">2</li>
  		<li onclick="changeView(3)">3</li>
  		<li onclick="changeView(4)">4</li>
  		<li onclick="changeView(5)">5</li>
    </ul>
  </div>
  
  <div id="scroller">
    <div id="view 1" class="view">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="view 2" class="view">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="view 3" class="view">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="view 4" class="view">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="view 5" class="view">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>