在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 });