Horizontal mouse-scrolling not working in Firefox

Question

Horizontal mouse-scrolling not working in Firefox browsers.

This code work in Chrome, I mean You can use the mouse wheel to scroll the page horizontally. But in Firefox mouse wheel not scrolling with mouse.

HTML+JS

<section class="card" id="horizontal-scroller">

      <div class="card--content"></div>
      <div class="card--content"></div>
      <div class="card--content"></div>
      <div class="card--content"></div>
      <div class="card--content"></div>
      <div class="card--content"></div>
      <div class="card--content"></div>
      <div class="card--content"></div>
      <div class="card--content"></div>
      <div class="card--content"></div>

    </section>
    <script>
        document.getElementById("horizontal-scroller")
        .addEventListener('wheel', function(event) {
          if (event.deltaMode == event.DOM_DELTA_PIXEL) {
            var modifier = '1';
            // it's for Firefox, but don't work
          } else if (event.deltaMode == event.DOM_DELTA_LINE) {
            var modifier = parseInt(getComputedStyle(this).lineHeight);
          } else if (event.deltaMode == event.DOM_DELTA_PAGE) {
            var modifier = this.clientHeight;
          }
          if (event.deltaY != 0) {
            // change vertical scrolling to gorizontal
            this.scrollLeft += modifier * event.deltaY;
            event.preventDefault();
          }
        });
    </script>

style.css

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #8e44ad;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
    background-color: #fff;
    min-width: 100%;
    min-height: 200px;
    display: flex;
    overflow-x: auto;
  }
  .card--content {
    background-color: #e74c3c;
    min-width: 200px;
    margin: 5px;
  }
  .card::-webkit-scrollbar {
    display: none;
  }

---------------------------------------------------Thanks in advance-------------------------------------------------------------------------------------------------------------------

Answer 1

This call getComputedStyle(this).lineHeight gaves you normal as the return value. That is why calling this modifier = parseInt(getComputedStyle(this).lineHeight); sets NaN as the value of the modifier attribute. I've added some check for that:

document.getElementById("horizontal-scroller").addEventListener('wheel', function(event) {
  var modifier = 1;
  
  if (event.deltaMode == event.DOM_DELTA_PIXEL) {
    modifier = 1;
  } 
  else if (event.deltaMode == event.DOM_DELTA_LINE) {
    modifier = parseInt(getComputedStyle(this).lineHeight);
  } 
  else if (event.deltaMode == event.DOM_DELTA_PAGE) {
    modifier = this.clientHeight;
  }
  
  if(isNaN(modifier)) {
    modifier = 1;
  }
  
  if (event.deltaY != 0) {
    this.scrollLeft += modifier * event.deltaY;
    event.preventDefault();
  }
});

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #8e44ad;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  background-color: #fff;
  min-width: 100%;
  min-height: 200px;
  display: flex;
  overflow-x: auto;
}
.card--content {
  background-color: #e74c3c;
  min-width: 200px;
  margin: 5px;
}
.card::-webkit-scrollbar {
  display: none;
}

<section class="card" id="horizontal-scroller">
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
</section>