css3手動實現pc端橫向滾動

  發布時間:2022-06-20 16:07:31   作者: 5大大大大雄   我要評論
本文主要介紹了css3手動實現pc端橫向滾動,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

由于容器隱藏橫向滾動條后,移動端橫向滾動效果不受影響,但是pc端是無法通過鼠標進行橫向滾動,因此需要自己手動實現效果。

  • draggable="false",通過設置draggable,是可以設置html不允許拖拽效果,通過拖拽可以初步實現pc端橫向滾動行為。
    • draggable的兼容性是最好HTML屬性
    • css樣式-webkit-user-drag: none;也可以實現類似效果,兼容性不太好,移動效果大部份都有效
  • user-select:屬性可以設置是否允許用戶選擇頁面中的圖文內容
  • mousedownmouseup:通過設置鼠標事件,實現鼠標按下后,坐標位置不一樣,讓容器調用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(&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>
  • 最終實現的效果,如下圖:

到此這篇關于css3手動實現pc端橫向滾動的文章就介紹到這了,更多相關css3 pc端橫向滾動內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

相關文章

  • CSS3實現精美橫向滾動菜單按鈕

    今天給大家分享基于css3實現精美橫向滾動菜單按鈕,非常不錯,具有參考借鑒價值,需要的的朋友參考下吧
    2017-04-14

最新評論

美丽人妻被按摩中出中文字幕