title: JavaScript application: trying to make the "wheel" event listener discontinuous fails
body: <p>I am working on a small "Picture browser" application in Bootstrap 4 and JavaScript.</p>
  
  <p>As can be seen below, there is a "Prev" and a "Next" button that help navigate through the pictures.</p>
  
  <p>I have bean trying to find a reliable method to make <em>mouse well scrolling</em> function the same as these buttons. Scrolling <em>down</em> would be the equivalent of clicking the "Next" button. Scrolling <em>up</em> would be the equivalent of clicking the "Prev" button.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var picArr = $('#pictures_list li');
  // The index of the last element of the array is "maxIndex"
  var maxIndex = picArr.length - 1;
  // Initialize counter
  var counter = 0;
  var updateCounter = function(btn) {
    var direction = $(btn).data("direction")
    if (direction === "left") {
      if (counter &gt; 0) {
        counter--;
      } else {
        counter = maxIndex;
      }
    } else {
      if (counter &lt; maxIndex) {
        counter++;
      } else {
        counter = 0;
      }
    }
  }
  
  var showCount = function(container_id) {
    var pageCount = counter + 1;
    document.getElementById(container_id).innerHTML = "Picture " + pageCount + " of " + picArr.length;
  }
  
  var showSlide = function() {
    var mTop = (200 * counter) * (-1) + 'px';
    $('#pictures_list').animate({
      'marginTop': mTop
    }, 400);
  }
  
  showCount('show_count');
  
  $('#controls button').on('click', function() {
    updateCounter(this);
    showSlide();
    showCount('show_count');
  });
  
  document.getElementById("picture_frame").addEventListener("wheel", function() {
    updateCounter(this);
    showSlide();
    showCount('show_count')
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#picture_frame {
    width: 200px;
    height: 200px;
    margin: 5px auto;
    border: 1px solid #ccc;
    border-radius: 2px;
    overflow: hidden;
  }
  
  .controls&gt;div {
    display: inline-block;
  }
  
  #picture_frame {
    height: 200px;
    overflow: hidden;
  }
  
  #pictures_list {
    flex-flow: row wrap;
    align-items: stretch;
    width: 200px;
  }
  
  #pictures_list li {
    display: flex;
    height: 200px;
    flex: 1 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
    &lt;div id="picture_frame"&gt;
      &lt;ul id="pictures_list" class="list-unstyled d-flex"&gt;
        &lt;li&gt;&lt;img src="https://picsum.photos/200/200
  " alt="First picture"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="https://picsum.photos/200/200?gravity=east
  " alt="Second picture"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="https://picsum.photos/200/200?gravity=west
  " alt="Third picture"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="https://picsum.photos/200/200?gravity=north
  " alt="Fourth picture"&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="text-center mb-2"&gt;
      &lt;span class="badge badge-primary" id="show_count"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="controls text-center"&gt;
      &lt;div class="btn-group" id="controls"&gt;
        &lt;button type="button" class="btn btn-primary btn-sm" data-direction="left"&gt;Prev&lt;/button&gt;
        &lt;button type="button" class="btn btn-primary btn-sm" data-direction="right"&gt;Next&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Firing the <code>showSlide()</code> function on mouse wheel does work, but the transition is too... <strong>continuous</strong>. I wish it would be identical to the transition triggered by the buttons. </p>
  
  <p>What am I missing?</p>