在document.body上使用scrollLeft进行水平滚动，无法在Firefox / Safari中使用

Question

I'm building a horizontal scroll with css grid and I change the offsetLeft of (document.documentElement || document.body.parentNode || document.body) when I trigger a mousewheel event. It's working fine in Chrome but it's not in Firefox or Safari. Here's a pen I created to reproduce the problem: https://codepen.io/rluijten/pen/ewRpyM

 class HorizontalScroll { constructor() { this.scrollContainer = document.querySelector('.js-scroll'); this.target = (document.documentElement || document.body.parentNode || document.body); this.state = { moving: false, scrollDir: '', scrollPos: this.target.scrollLeft, scrollTop: 0, speed: 90, smooth: 12 }; this.rAF = null; this.scroll = this.scroll.bind(this); this.updateScrollPosition = this.updateScrollPosition.bind(this); } scroll(e) { e.preventDefault(); // update scroll direction if (this.state.scrollPos > this.state.scrollTop) this.state.scrollDir = 'down'; else this.state.scrollDir = 'up'; this.state.scrollTop = this.state.scrollPos <= 0 ? 0 : this.state.scrollPos; console.log(this.target.scrollLeft); // smooth scroll let delta; if (e.detail) { if (e.wheelDelta) delta = e.wheelDelta / e.detail / 40 * (e.detail > 0 ? 1 : -1); else delta = -e.detail / 3; } else { delta = e.wheelDelta / 120; } this.state.scrollPos += -delta * this.state.speed; this.state.scrollPos = Math.max( 0, Math.min(this.state.scrollPos, this.target.scrollWidth - this.target.clientWidth) ); if (!this.state.moving) this.updateScrollPosition(); } updateScrollPosition() { this.state.moving = true; const delta = (this.state.scrollPos - this.target.scrollLeft) / this.state.smooth; console.log(delta); this.target.scrollLeft += delta; if (Math.abs(delta) > 0) window.requestAnimationFrame(this.updateScrollPosition); else this.state.moving = false; } init() { window.addEventListener('mousewheel', this.scroll, { passive: false }); console.log(this.target); } } const horizontalScroll = new HorizontalScroll(); horizontalScroll.init(); 

 body { margin: 0; } .scroll { display: flex; align-items: center; height: 100vh; } .scroll__container { display: grid; grid-template-rows: repeat(2, 1fr); grid-row-gap: 15px; grid-auto-flow: column; } .scroll__content { display: flex; align-items: flex-end; } .scroll__element { display: inline-block; position: relative; margin-right: 15px; } .scroll__image { width: 400px; height: 200px; object-fit: cover; } 

 <div class="scroll js-scroll"> <div class="scroll__container js-filter-container"> <div class="scroll__content js-content"> <a href="#" class="scroll__element js-element"> <img class="img scroll__image" src="https://source.unsplash.com/random" /> </a> <a href="#" class="scroll__element js-element"> <img class="img scroll__image" src="https://source.unsplash.com/random" /> </a> <a href="#" class="scroll__element js-element"> <img class="img scroll__image" src="https://source.unsplash.com/random" /> </a> <a href="#" class="scroll__element js-element"> <img class="img scroll__image" src="https://source.unsplash.com/random" /> </a> <a href="#" class="scroll__element js-element"> <img class="img scroll__image" src="https://source.unsplash.com/random" /> </a> <a href="#" class="scroll__element js-element"> <img class="img scroll__image" src="https://source.unsplash.com/random" /> </a> <a href="#" class="scroll__element js-element"> <img class="img scroll__image" src="https://source.unsplash.com/random" /> </a> </div> <div class="scroll__content js-content"> <a href="#" class="scroll__element js-element"> <img class="img scroll__image" src="https://source.unsplash.com/random" /> </a> <a href="#" class="scroll__element js-element"> <img class="img scroll__image" src="https://source.unsplash.com/random" /> </a> <a href="#" class="scroll__element js-element"> <img class="img scroll__image" src="https://source.unsplash.com/random" /> </a> <a href="#" class="scroll__element js-element"> <img class="img scroll__image" src="https://source.unsplash.com/random" /> </a> <a href="#" class="scroll__element js-element"> <img class="img scroll__image" src="https://source.unsplash.com/random" /> </a> <a href="#" class="scroll__element js-element"> <img class="img scroll__image" src="https://source.unsplash.com/random" /> </a> <a href="#" class="scroll__element js-element"> <img class="img scroll__image" src="https://source.unsplash.com/random" /> </a> </div> </div> </div> 

Any ideas?

Answer 1

Event mousewheel is not working on firefox, you need to replace it with DOMMouseScroll , so to do that you need to check if user is using Chrome or Firefox and based on that set event listeners. Or you can add both listeners on your init() like this.

// Chrome
 window.addEventListener('mousewheel', this.scroll, { passive: false });
 // Firefox
 window.addEventListener("DOMMouseScroll", this.scroll, { passive: false });