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系列之3D制作方法案例
Aug 14 HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 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
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
PHP 中常量的知识整理
2017/04/14 PHP
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
python简单判断序列是否为空的方法
2015/06/30 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
Python多线程扫描端口代码示例
2018/02/09 Python
Python中文编码知识点
2019/02/18 Python
Django中URL的参数传递的实现
2019/08/04 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
高山背包:High Sierra
2017/11/23 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
大学本科毕业生求职信范文
2013/12/18 职场文书
班级出游活动计划书
2014/08/15 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书