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

Question

我正在用css网格构建一个水平滚动，当我触发mousewheel事件时，我更改了(document.documentElement || document.body.parentNode || document.body)的offsetLeft。 它在Chrome中运行良好，但它不在Firefox或Safari中。 这是我为重现问题而创建的一支笔： 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> 

有任何想法吗？

Answer 1

事件mousewheel DOMMouseScroll无法在firefox上运行，您需要将其替换为DOMMouseScroll ，因此，您需要检查用户是否使用Chrome或Firefox并基于该设置的事件侦听器。 或者您可以像这样在init（）上添加两个侦听器。

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