首页 > 其他分享 >一行CSS解决难倒工程师两天的问题!

一行CSS解决难倒工程师两天的问题!

时间:2024-07-25 20:50:28浏览次数:14  
标签:工程师 难倒 问题 action CSS touch 滑动 swiper

遇到了一个非常奇怪的问题。首页用swiper实现了几个栏目的选项卡,然后在推荐栏,是滚动加载的瀑布流。

出现了一个问题,在移动端(PC上不会),左右滑动切换栏目的时候,swiper卡住了,如果上下滑动的时候,稍稍有一点倾斜,也会触发swiper的左右滑动,但是会滑到一半卡住!

swiper这样一个成熟的组件,不可能出现低级的bug。

那么是使用方式有问题吗?检查了swiper的使用和瀑布流相关的代码,都没发现问题。而且在PC端运行正常,那么代码应该是没问题的。

初步判断是swiper触发touch事件时,可能和scroll产生了冲突。但是这样一个成熟的组件,touch计算怎么会出错呢?而且看源码,计算还挺复杂的,如果去重写,复杂而且容易出bug。

在公司里,两个工程师看了几天这个问题,都没有头绪。

因为定位到应该是touch事件的触发问题,google到了一个CSS属性!

touch-action

CSS 属性 touch-action 用于设置触摸屏用户如何操纵元素的区域 (例如,浏览器内置的缩放功能)。 可以决定触摸屏的手势可以进行哪些操作。 比如pan-x,就是启用单指水平平移手势。即设置了这个属性的区域,只有水平平移手势能触发touch事件。   完整的规范请参考MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action   解决 所以,在瀑布流区域,设置touch-action:pan-y,在手机上测试,问题完美解决! 因为之前scroll或者touchmove时两个事件会冲突,导致swiper滑动卡住。 一行CSS就解决了看似复杂的问题。

标签:工程师,难倒,问题,action,CSS,touch,滑动,swiper
From: https://www.cnblogs.com/-867259206/p/18324099

相关文章

  • 信息安全工程师题
    数字签名不可改变有一些信息安全事件是由于信息系统中多个部分共同作用造成的,人们称这类事件为“多组件事件”,应对这类安全事件最有效的方法是(使用集中的日志审计工具和事件关联分析软件)包过滤技术防火墙在过滤数据包时,一般不关心数据包的内容风险评估要识别资产相关要素的关系......
  • 0基础成功转行网络安全工程师,年薪30W+,经验总结都在这(建议收藏)
    我曾经是一名普通的销售人员,工作了三年,每天重复着相同的工作内容,感觉自己的职业生涯停滞不前,毫无发展前景。我开始思考,如何才能让自己的职业生涯更有意义,更具有挑战性。经过一番调研,我决定转行网络安全工程师。工作了越久,越觉得当初转行网络安全的决定还是非常正确的。目......
  • 【中项】系统集成项目管理工程师-第5章 软件工程-5.1软件工程定义与5.2软件需求
    前言:系统集成项目管理工程师专业,现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。     软考同样是国家人社部和工信部组织的国家级考试,全称为“全国计算机与软件专业技术资格(水平)考试”,目前涵盖了计算机软件、计算机网络、计算机应用技术......
  • 【中项】系统集成项目管理工程师-第5章 软件工程-5.6软件质量管理与5.7软件过程能力成
    前言:系统集成项目管理工程师专业,现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。     软考同样是国家人社部和工信部组织的国家级考试,全称为“全国计算机与软件专业技术资格(水平)考试”,目前涵盖了计算机软件、计算机网络、计算机应用技术......
  • 【中项】系统集成项目管理工程师-第4章 信息系统架构-4.8云原生架构
    前言:系统集成项目管理工程师专业,现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。     软考同样是国家人社部和工信部组织的国家级考试,全称为“全国计算机与软件专业技术资格(水平)考试”,目前涵盖了计算机软件、计算机网络、计算机应用技术......
  • BI项目中ETL工程师的工作职责与技能要求
    在商业智能(BI)项目中,ETL工程师扮演着至关重要的角色,他们负责数据提取、转换和加载,确保数据仓库中的数据准确、一致和可用。一、工作职责:数据需求分析:与业务分析师和数据架构师合作,了解业务需求并确定数据提取和转换规则。数据抽取和加载:设计和实施ETL流程,从各种数据源中提......
  • 前端必修技能:高手进阶核心知识分享 - CSS 选择器
    前端必修技能:高手进阶核心知识分享-CSS选择器CSS(层叠样式表)提供了多种选择器,用于选择要应用样式的HTML元素。CSS选择器用于选择你想要的元素的样式的模式。看了上面的图,你发现就算你不知道选择器名字叫什么,属于哪一种,但不知不觉的,你其实已经习惯了其中的很多种选择器......
  • WebKit的文本装饰艺术:CSS Text Decoration全解析
    WebKit的文本装饰艺术:CSSTextDecoration全解析CSS文本装饰(TextDecoration)是一组用于美化和增强网页文本表现的属性,它们可以为文本添加下划线、上划线、线删除和强调标记等效果。WebKit作为许多现代浏览器的渲染引擎,对CSS文本装饰的支持非常全面。本文将深入探讨WebKit对......
  • 2024 | 大模型算法工程师相关面试题汇总及答案解析
    前言在准备大模型的面试时,我们需要对模型的基础理论、进阶应用、微调策略、以及特定技术如LangChain、参数高效微调(PEFT)等有深入的理解。这里给大家整理了一份详细的面试题,帮助大家提前进行面试复习,同时对自己的技术进行查漏补缺。一、大模型基础面试题目前主流的开源模......
  • 网络运维工程师的全面工作指南与命令参考
     在我们当今数字化的时代,网络运维工程师的角色变得日益重要,本文将深入探讨网络运维工程师的主要职责,并通过具体的命令示例,展示作为一位网络工程师要如何使用各种工具来进行工作。网络监控网络监控是运维工程师的日常工作之一,目的是实时了解网络状态,快速响应任何可能影响业......