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

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

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

  1. <section class="card" id="horizontal-scroller">
  3.       <div class="card--content"></div>
  4.       <div class="card--content"></div>
  5.       <div class="card--content"></div>
  6.       <div class="card--content"></div>
  7.       <div class="card--content"></div>
  8.       <div class="card--content"></div>
  9.       <div class="card--content"></div>
  10.       <div class="card--content"></div>
  11.       <div class="card--content"></div>
  12.       <div class="card--content"></div>
  14.     </section>
  15.     <script>
  16.         document.getElementById("horizontal-scroller")
  17.         .addEventListener('wheel', function(event) {
  18.           if (event.deltaMode == event.DOM_DELTA_PIXEL) {
  19.             var modifier = '1';
  20.             // it's for Firefox, but don't work
  21.           } else if (event.deltaMode == event.DOM_DELTA_LINE) {
  22.             var modifier = parseInt(getComputedStyle(this).lineHeight);
  23.           } else if (event.deltaMode == event.DOM_DELTA_PAGE) {
  24.             var modifier = this.clientHeight;
  25.           }
  26.           if (event.deltaY != 0) {
  27.             // change vertical scrolling to horizontal
  28.             this.scrollLeft += modifier * event.deltaY;
  29.             event.preventDefault();
  30.           }
  31.         });
  32.     </script>

style.css

  1. html,
  2. body {
  3.   width: 100%;
  4.   height: 100%;
  5. }
  7. body {
  8.   background-color: #8e44ad;
  9.   margin: 0;
  10.   display: flex;
  11.   justify-content: center;
  12.   align-items: center;
  13. }
  14. .card {
  15.     background-color: #fff;
  16.     min-width: 100%;
  17.     min-height: 200px;
  18.     display: flex;
  19.     overflow-x: auto;
  20.   }
  21.   .card--content {
  22.     background-color: #e74c3c;
  23.     min-width: 200px;
  24.     margin: 5px;
  25.   }
  26.   .card::-webkit-scrollbar {
  27.     display: none;
  28.   }

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

  1. <section class="card" id="horizontal-scroller">
  3.       <div class="card--content"></div>
  4.       <div class="card--content"></div>
  5.       <div class="card--content"></div>
  6.       <div class="card--content"></div>
  7.       <div class="card--content"></div>
  8.       <div class="card--content"></div>
  9.       <div class="card--content"></div>
  10.       <div class="card--content"></div>
  11.       <div class="card--content"></div>
  12.       <div class="card--content"></div>
  14.     </section>
  15.     <script>
  16.         document.getElementById("horizontal-scroller")
  17.         .addEventListener('wheel', function(event) {
  18.           if (event.deltaMode == event.DOM_DELTA_PIXEL) {
  19.             var modifier = '1';
  20.             // it's for Firefox, but don't work
  21.           } else if (event.deltaMode == event.DOM_DELTA_LINE) {
  22.             var modifier = parseInt(getComputedStyle(this).lineHeight);
  23.           } else if (event.deltaMode == event.DOM_DELTA_PAGE) {
  24.             var modifier = this.clientHeight;
  25.           }
  26.           if (event.deltaY != 0) {
  27.             // change vertical scrolling to gorizontal
  28.             this.scrollLeft += modifier * event.deltaY;
  29.             event.preventDefault();
  30.           }
  31.         });
  32.     </script>

style.css

  1. html,
  2. body {
  3.   width: 100%;
  4.   height: 100%;
  5. }
  7. body {
  8.   background-color: #8e44ad;
  9.   margin: 0;
  10.   display: flex;
  11.   justify-content: center;
  12.   align-items: center;
  13. }
  14. .card {
  15.     background-color: #fff;
  16.     min-width: 100%;
  17.     min-height: 200px;
  18.     display: flex;
  19.     overflow-x: auto;
  20.   }
  21.   .card--content {
  22.     background-color: #e74c3c;
  23.     min-width: 200px;
  24.     margin: 5px;
  25.   }
  26.   .card::-webkit-scrollbar {
  27.     display: none;
  28.   }

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

答案1

得分: 0

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

  1. document.getElementById("horizontal-scroller").addEventListener('wheel', function(event) {
  2.   var modifier = 1;
  3.   
  4.   if (event.deltaMode == event.DOM_DELTA_PIXEL) {
  5.     modifier = 1;
  6.   } 
  7.   else if (event.deltaMode == event.DOM_DELTA_LINE) {
  8.     modifier = parseInt(getComputedStyle(this).lineHeight);
  9.   } 
  10.   else if (event.deltaMode == event.DOM_DELTA_PAGE) {
  11.     modifier = this.clientHeight;
  12.   }
  13.   
  14.   if(isNaN(modifier)) {
  15.     modifier = 1;
  16.   }
  17.   
  18.   if (event.deltaY != 0) {
  19.     this.scrollLeft += modifier * event.deltaY;
  20.     event.preventDefault();
  21.   }
  22. });
  1. html,
  2. body {
  3.   width: 100%;
  4.   height: 100%;
  5. }
  7. body {
  8.   background-color: #8e44ad;
  9.   margin: 0;
  10.   display: flex;
  11.   justify-content: center;
  12.   align-items: center;
  13. }
  14. .card {
  15.   background-color: #fff;
  16.   min-width: 100%;
  17.   min-height: 200px;
  18.   display: flex;
  19.   overflow-x: auto;
  20. }
  21. .card--content {
  22.   background-color: #e74c3c;
  23.   min-width: 200px;
  24.   margin: 5px;
  25. }
  26. .card::-webkit-scrollbar {
  27.   display: none;
  28. }
  1. <section class="card" id="horizontal-scroller">
  2.   <div class="card--content"></div>
  3.   <div class="card--content"></div>
  4.   <div class="card--content"></div>
  5.   <div class="card--content"></div>
  6.   <div class="card--content"></div>
  7.   <div class="card--content"></div>
  8.   <div class="card--content"></div>
  9.   <div class="card--content"></div>
  10.   <div class="card--content"></div>
  11.   <div class="card--content"></div>
  12. </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 -->

  1. document.getElementById(&quot;horizontal-scroller&quot;).addEventListener(&#39;wheel&#39;, function(event) {
  2.   var modifier = 1;
  3.   
  4.   if (event.deltaMode == event.DOM_DELTA_PIXEL) {
  5. 	modifier = 1;
  6.   } 
  7.   else if (event.deltaMode == event.DOM_DELTA_LINE) {
  8.     modifier = parseInt(getComputedStyle(this).lineHeight);
  9.   } 
  10.   else if (event.deltaMode == event.DOM_DELTA_PAGE) {
  11.     modifier = this.clientHeight;
  12.   }
  13.   
  14.   if(isNaN(modifier)) {
  15. 	modifier = 1;
  16.   }
  17.   
  18.   if (event.deltaY != 0) {
  19.     this.scrollLeft += modifier * event.deltaY;
  20.     event.preventDefault();
  21.   }
  22. });

<!-- language: lang-css -->

  1. html,
  2. body {
  3.   width: 100%;
  4.   height: 100%;
  5. }
  7. body {
  8.   background-color: #8e44ad;
  9.   margin: 0;
  10.   display: flex;
  11.   justify-content: center;
  12.   align-items: center;
  13. }
  14. .card {
  15.     background-color: #fff;
  16.     min-width: 100%;
  17.     min-height: 200px;
  18.     display: flex;
  19.     overflow-x: auto;
  20.   }
  21.   .card--content {
  22.     background-color: #e74c3c;
  23.     min-width: 200px;
  24.     margin: 5px;
  25.   }
  26.   .card::-webkit-scrollbar {
  27.     display: none;
  28.   }

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

  1. &lt;section class=&quot;card&quot; id=&quot;horizontal-scroller&quot;&gt;
  2.   &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  3.   &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  4.   &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  5.   &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  6.   &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  7.   &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  8.   &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  9.   &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  10.   &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  11.   &lt;div class=&quot;card--content&quot;&gt;&lt;/div&gt;
  12. &lt;/section&gt;

<!-- end snippet -->

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

发表评论

匿名网友

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

确定