css3手動(dòng)實(shí)現(xiàn)pc端橫向滾動(dòng)
發(fā)布時(shí)間:2022-06-20 16:07:31 作者: 5大大大大雄
我要評(píng)論

本文主要介紹了css3手動(dòng)實(shí)現(xiàn)pc端橫向滾動(dòng),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
由于容器隱藏橫向滾動(dòng)條后,移動(dòng)端橫向滾動(dòng)效果不受影響,但是pc端是無法通過鼠標(biāo)進(jìn)行橫向滾動(dòng),因此需要自己手動(dòng)實(shí)現(xiàn)效果。
draggable="false"
,通過設(shè)置draggable,是可以設(shè)置html不允許拖拽效果,通過拖拽可以初步實(shí)現(xiàn)pc端橫向滾動(dòng)行為。- draggable的兼容性是最好HTML屬性
- css樣式
-webkit-user-drag: none;
也可以實(shí)現(xiàn)類似效果,兼容性不太好,移動(dòng)效果大部份都有效
user-select
:屬性可以設(shè)置是否允許用戶選擇頁面中的圖文內(nèi)容mousedown
和mouseup
:通過設(shè)置鼠標(biāo)事件,實(shí)現(xiàn)鼠標(biāo)按下后,坐標(biāo)位置不一樣,讓容器調(diào)用scrollTo
就可以實(shí)現(xiàn)滾動(dòng)效果。wheel
:通過滾動(dòng)事件,在容器內(nèi)滾動(dòng)滾軸可以橫向滾動(dòng)getBoundingClientRect
,記錄每個(gè)圖標(biāo)的x位置,通過前后位置是否變化,如果不變化,鼠標(biāo)單擊的時(shí)候就可以觸發(fā)單擊事件。因?yàn)閙ousedown事件發(fā)生也會(huì)觸發(fā)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>
- 最終實(shí)現(xiàn)的效果,如下圖:
到此這篇關(guān)于css3手動(dòng)實(shí)現(xiàn)pc端橫向滾動(dòng)的文章就介紹到這了,更多相關(guān)css3 pc端橫向滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
CSS3實(shí)現(xiàn)精美橫向滾動(dòng)菜單按鈕
今天給大家分享基于css3實(shí)現(xiàn)精美橫向滾動(dòng)菜單按鈕,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-04-14