css3手动实现pc端横向滚动


Posted in HTML / CSS onJune 21, 2022

由于容器隐藏横向滚动条后,移动端横向滚动效果不受影响,但是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端横向滚动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 

Tags in this post...

HTML / CSS 相关文章推荐
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 HTML / CSS
CSS link与@import的区别和用法解析
May 07 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 #HTML / CSS
css如何把元素固定在容器底部的四种方式
css中有哪些方式可以隐藏页面元素及区别
Jun 16 #HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 #HTML / CSS
css样式important规则的正确使用方式
Jun 10 #HTML / CSS
分享几个实用的CSS代码块
Jun 10 #HTML / CSS
html中两种获取标签内的值的方法
Jun 10 #HTML / CSS
You might like
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
vuex实现购物车功能
2020/06/28 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
Python 3中的yield from语法详解
2017/01/18 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
python实现高斯投影正反算方式
2020/01/17 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
自我鉴定书范文
2013/10/02 职场文书
合同专员岗位职责
2013/12/18 职场文书
中学生自我鉴定
2014/02/04 职场文书
公司授权委托书
2014/04/04 职场文书
会计学专业自荐信
2014/06/25 职场文书
个人简历自荐信
2014/06/26 职场文书
大学生学习计划书
2014/09/15 职场文书
大学生实训报告总结
2014/11/05 职场文书
小数乘法教学反思
2016/02/22 职场文书