欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)容
  • mousedownmouseup:通過設(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(&quot;https://res.minigame.vip/gc-assets/crazy-ball/crazy-ball_icon.webp&quot;); 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(&quot;https://res.minigame.vip/gc-assets/mutant-dino/mutant-dino_icon.webp&quot;); 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(&quot;https://res.minigame.vip/gc-assets/plants-beatzombies/plants-beatzombies_icon.webp&quot;); 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(&quot;https://res.minigame.vip/gc-assets/queen-hulahoop/queen-hulahoop_icon.webp&quot;); 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(&quot;https://res.minigame.vip/gc-assets/popstone2/popstone2_icon.webp&quot;); 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(&quot;https://res.minigame.vip/gc-assets/ninja-sword/ninja-sword_icon.webp&quot;); 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)文章

最新評(píng)論