水平鼠标滚动在Firefox中不起作用。

huangapple go评论76阅读模式
英文:

Horizontal mouse-scrolling not working in Firefox

问题

Horizontal mouse-scrolling not working in Firefox browsers.

This code works in Chrome, I mean you can use the mouse wheel to scroll the page horizontally.
But in Firefox, the mouse wheel is not scrolling with the 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 horizontal
            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-------------------------------------------------------------------------------------------------------------------

英文:

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-------------------------------------------------------------------------------------------------------------------

答案1

得分: 0

这个调用 getComputedStyle(this).lineHeight 返回 normal 作为返回值。这就是为什么调用 modifier = parseInt(getComputedStyle(this).lineHeight); 会将 NaN 设置为修改器属性的值。我已经添加了一些检查:

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>
英文:

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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.getElementById(&quot;horizontal-scroller&quot;).addEventListener(&#39;wheel&#39;, 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();
  }
});

<!-- language: lang-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;
  }

<!-- language: lang-html -->

&lt;section class=&quot;card&quot; id=&quot;horizontal-scroller&quot;&gt;
  &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
&lt;/section&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月6日 18:37:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/76627945.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定