新教程:css3手动实现pc端横向滚动
由于容器隐藏横向滚动条后，移动端横向滚动效果不受影响，但是pc端是无法通过鼠标进行横向滚动，因此需要自己手动实现效果。
draggable="false"，通过设置draggable，是可以设置html不允许拖拽效果，通过拖拽可以初步实现pc端横向滚动行为。- draggable的兼容性是最好HTML属性
- css样式
-webkit-user-drag: none;也可以实现类似效果，兼容性不太好，移动效果大部份都有效
user-select:属性可以设置是否允许用户选择页面中的图文内容mousedown和mouseup：通过设置鼠标事件，实现鼠标按下后，坐标位置不一样，让容器调用scrollTo就可以实现滚动效果。wheel：通过滚动事件，在容器内滚动滚轴可以横向滚动getBoundingClientRect，记录每个图标的x位置，通过前后位置是否变化，如果不变化,鼠标单击的时候就可以触发单击事件。因为mousedown事件发生也会触发click事件
class Scroller { init() { this.setDragWheelEvent(".gameShow"); this.setDragScrollEvent(".gameShow"); this.initClick(); } throttle(fn, wait) { let inThrottle, lastFn, lastTime; return function () { const context = this, args = arguments; if (!inThrottle) { fn.apply(context, args); lastTime = Date.now(); inThrottle = true; } else { clearTimeout(lastFn); lastFn = setTimeout(function () { if (Date.now() - lastTime >= wait) { fn.apply(context, args); lastTime = Date.now(); } }, Math.max(wait - (Date.now() - lastTime), 0)); } }; } setDragWheelEvent(selector) { const gameShowEle = document.querySelector(selector); gameShowEle.addEventListener("wheel", (event) => { event.preventDefault(); gameShowEle.scrollLeft += event.deltaY; }); } setDragScrollEvent(selector) { const gameShowEle = document.querySelector(selector); let left = 0; let oldLeft = 0; const move = this.throttle((event) => { let x = left + (oldLeft - event.clientX) if (x < 0) x = 0; gameShowEle.scrollTo(x, 0) }, 100) gameShowEle.addEventListener('mousedown', function (event) { gameShowEle.style.cursor = 'grabbing'; gameShowEle.style.userSelect = 'none'; oldLeft = event.clientX; left = gameShowEle.scrollLeft; document.addEventListener('mousemove', move) }); document.addEventListener('mouseup', function () { gameShowEle.style.cursor = 'pointer'; gameShowEle.style.removeProperty('user-select'); document.removeEventListener('mousemove', move) }) } isMobile() { return window.navigator.userAgent.match( /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|Symbian|Windows Phone)/i ); } initClick() { const imgSpaceEles = document.querySelectorAll(".imgSpace"); if (imgSpaceEles) { const xAarry = []; Array.from(imgSpaceEles).forEach((imgSpaceEle, index) => { const href = imgSpaceEle.getAttribute("url"); let { x } = imgSpaceEle.getBoundingClientRect(); xAarry.push(x); imgSpaceEle.addEventListener("click", () => { let { x: newx } = imgSpaceEle.getBoundingClientRect(); if (xAarry[index] == newx || this.isMobile()) { alert(href) } xAarry.forEach((m, i) => { const ele = imgSpaceEles[i]; const site = ele.getBoundingClientRect(); xAarry[i] = site.x }) }) }) } } } window.onload = () => { const scroller = new Scroller() scroller.init(); } <style> .gameMenu { overflow: hidden; margin: 0 auto; height: 100%; } .gameMenu>div { display: flex; flex-direction: column; justify-content: center; align-content: center; box-sizing: border-box; margin: auto; padding: 10px 10px 0 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; width: 320px; height: 100%; background: #fff; } .games { border-radius: 10px; width: 100%; height: 90px; box-shadow: rgb(0 0 0 / 16%) 0 0 10px 0; } .navigationStyle { display: flex; overflow: hidden; position: relative; justify-content: center; align-items: center; padding: 0 1px; width: 100%; height: 100%; } .gameShow { display: flex; overflow-x: scroll; align-items: center; width: inherit; height: 90px; cursor: pointer; } .gameShow::-webkit-scrollbar { display: none; } .imgSpace { margin: 5px; width: 60px; height: 60px; } </style> <div class="gameMenu" style="width: 320px"> <div> <div class="games"> <div id="navigationStyle" class="navigationStyle"> <div class="gameShow" draggable="false" style="cursor: pointer;"> <div class="imgSpace" url="/game/crazy-ball/play" title="crazy-ball"> <div style="position: relative"> <div style="width: 60px; height: 60px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 9px 5px 0px; background-image: url("https://res.minigame.vip/gc-assets/crazy-ball/crazy-ball_icon.webp"); background-position: center center; background-repeat: no-repeat; background-size: contain;"> </div> </div> </div> <div class="imgSpace" url="/game/mutant-dino/play" title="mutant-dino"> <div style="position: relative"> <div style="width: 60px; height: 60px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 9px 5px 0px; background-image: url("https://res.minigame.vip/gc-assets/mutant-dino/mutant-dino_icon.webp"); background-position: center center; background-repeat: no-repeat; background-size: contain;"> </div> </div> </div> <div class="imgSpace" url="/game/plants-beatzombies/play" title="plants-beatzombies"> <div style="position: relative"> <div style="width: 60px; height: 60px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 9px 5px 0px; background-image: url("https://res.minigame.vip/gc-assets/plants-beatzombies/plants-beatzombies_icon.webp"); background-position: center center; background-repeat: no-repeat; background-size: contain;"> </div> </div> </div> <div class="imgSpace" url="/game/queen-hulahoop/play" title="queen-hulahoop"> <div style="position: relative"> <div style="width: 60px; height: 60px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 9px 5px 0px; background-image: url("https://res.minigame.vip/gc-assets/queen-hulahoop/queen-hulahoop_icon.webp"); background-position: center center; background-repeat: no-repeat; background-size: contain;"> </div> </div> </div> <div class="imgSpace" url="/game/popstone2/play" title="popstone2"> <div style="position: relative"> <div style="width: 60px; height: 60px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 9px 5px 0px; background-image: url("https://res.minigame.vip/gc-assets/popstone2/popstone2_icon.webp"); background-position: center center; background-repeat: no-repeat; background-size: contain;"> </div> </div> </div> <div class="imgSpace" url="/game/ninja-sword/play" title="ninja-sword"> <div style="position: relative"></div> <div style="width: 60px; height: 60px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 9px 5px 0px; background-image: url("https://res.minigame.vip/gc-assets/ninja-sword/ninja-sword_icon.webp"); background-position: center center; background-repeat: no-repeat; background-size: contain;"> </div> </div> </div> </div> </div> </div> </div> - 最终实现的效果,如下图：
新教程:css3手动实现pc端横向滚动都看到这里了，搬砖不易，给小编点个赞呗，以后我会更有动力分享哦~
