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.0 图形构成实例练习一
Mar 19 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
浅析HTML5 Landmark
Sep 11 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
js 获取服务器控件值的代码
2010/03/05 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
Python中使用logging模块打印log日志详解
2015/04/05 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
python挖矿算力测试程序详解
2019/07/03 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
腾讯广告词
2014/03/19 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
世界文化遗产导游词
2015/02/13 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS