touch-action属性引起的探索
最近在做微信项目的时候遇到一个奇怪的问题:
常购清单的商品多了以后往上滑没有任何反应,不能滑动。但商城首页又可以往上滑。而且ios没有这个问题,安卓才有这个问题。
起初我以为是因为这2个页面调用接口循环加载出商品的方法不同导致的。商城首页的商品部分是用laytpl模板写的;常购清单商品部分是拼的字符串。
结果就是不管是模板写的还是拼的字符串,安卓都不能往上滑动,ios可以。
我以为是ios和安卓的兼容性问题,后来发现是在css文件里加了touch-action:none; 这句代码,只要把这句代码去掉就可以了。
解决方法:去掉这句代码——touch-action:none; (这句代码的意思是:禁止触发默认的手势操作)
至于为什么要加这句代码,是因为使用滚动时候,新版google浏览器,会弹出如下的警告。
解决办法就是加上这句代码: touch-action: none; 然后就测试了下,可以解决这个问题。后来忘记删除了,更没想到之后会出现上述问题,被自己坑了一次,哈哈
这个错相当于是一个警告,没有什么影响。当时出于好奇,想知道这个警告是什么,怎样把这个警告去掉,后来没想到加了touch-action:none;这句代码会造成上述问题
补充:
因为看到有小伙伴评论说是因为我监听的元素有passive: true属性,调用preventDefault()失败
然后专门去查了Passive Event Listeners属性(这个新特性是为解决滚动和触摸事件的卡顿而发明的)
详情:https://juejin.im/post/5ad804c1f265da504547fe68
touch-action属性引起的探索的更多相关文章
- struts之动态方法调用改变表单action属性
一.动态方法调用(DMI:Dynamic Method Invocation) ⒈struts2中同样提供了这个包含多个逻辑业处理的Action,这样就可以在一个Action中进行多个业务逻辑处理 ...
- action属性
action属性 2013年7月8日 14:52 Path: action的访问路径,以"/"开头 Type: action的类型 Name: action使用的actionFor ...
- 关于Windows Phone的资源文件Build Action属性
最近一朋友问了一个问题,他想引用一个本地图片到页面上的Image控件,可是发现用Application的GetResourceStream得到的结果是个null值,当时第一个想到的就是他图片的Buil ...
- ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前
原文:ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前 背景 当数据量大.查询条件复杂,多样多的时候,我们可能需要单独做一个查询界面,当用户选择设置了相关的 ...
- Touch 方法&属性 映射工具
Touch 方法&属性 映射工具(0.5 版本) 标签 : github 线上后门与接口调试: 原先需要测试一个接口(如Dubbo.DAO), 或为线上留后门, 需要写大量的Web层(Api. ...
- JavaScript动态修改html组件form的action属性
用javaScript动态修改html组件form的action属性,可以在提交时再决定处理表单的页面. <%--JavaScript部分--%><script language=& ...
- struts2在配置文件与JSP中用OGNL获取Action属性
参考:Struts与OGNL结合 struts2在配置文件中可以调用Action的属性,在JSP页面也可以取出Action的属性值(前提是属性有get,set方法). 第一个例子: 1.Action中 ...
- Action属性接收参数
一.action的属性(地址栏传参)接收参数:如果使用的JDK属性不一致,则会使得传值无法实现.解决办法:1.系统自身需要用到的JDK(window——>属性——>Java——>In ...
- form的action属性作用
一.action=""和action="#".没有action属性的作用相同,都是提交到当前页面(也就是document.location.href) 二.ac ...
- 使用Element的upload上传组件,不使用action属性上传
1.需要实现的效果如下图,在点击提交的时候再提交file数据,和其他数据统一上传,我把file转换成了base64的格式,可以再上传之前显示缩略图 2.代码分析 action属性值为"#&q ...
随机推荐
- uname命令详解
1.简介: uname命令用于打印当前系统相关信息(内核版本号.硬件架构.主机名称和操作系统类型等). 2.命令语法: uname (选项) 3.选项: -a或--all:显示全部的信息: -m或-- ...
- 修改tomcat的编码方式,可以解决某些get请求乱码问题
在tomcat/conf/server.xml配置文件添加如下,修改tomcat的编码方式 <Connector URIEncoding="utf-8" connection ...
- 客户端验证、tcp协议中多个客户端的同时在线
一.客户端验证 当在一个局域网内需要验证是否为合法的客户端连接时,我们需要写代码进行验证. Server端 import os import hmac import socket def auth(c ...
- 十一 hashlib模块
# 1.什么叫hash:hash是一种算法(3.x里代替了md5模块和sha模块,主要提供 SHA1, SHA224, SHA256, SHA384, SHA512 ,MD5 算法),该算法接受传入的 ...
- C++ 实现 split 操作
理由:由于 C++ 标准库里面没有字符分割函数 split ,这可太不方便了,我们利用 STL 来实现自己的 split 函数: 原型:vector<string> split(const ...
- 拉普拉斯平滑处理 Laplace Smoothing
背景:为什么要做平滑处理? 零概率问题,就是在计算实例的概率时,如果某个量x,在观察样本库(训练集)中没有出现过,会导致整个实例的概率结果是0.在文本分类的问题中,当一个词语没有在训练样本中出现,该词 ...
- Maven Nexus3 安装,私服搭建
为啥搭建Maven私服? 如果没有私服,我们所需的所有构件都需要通过maven的中央仓库和第三方的Maven仓库下载到本地,而一个团队中的所有人都重复的从maven仓库下载构件无疑加大了仓库的负载和浪 ...
- JVM思考-init和clinit区别
JVM思考-init和clinit区别 目录:JVM总括:目录 clinit和init的区别其实也就是Class对象初始化对象初始化的区别,详情看我上一篇博客: JVM总括四-类加载过程.双亲委派模型 ...
- https 网络传输安全架设
1:在集群的情况下,不能在tomcat上 架构ssl 而是在总路由nginx上架设具体实现如下截图 非对称加密是当前流行的加密传输方式 证书是什么 . 在浏览器证书查看 证书是访问请求时 https ...
- oracle 区分大小写遇到的坑
1. oracle 字段是区分大小写的 ..在navicat 中使用查询 select REMAIN_PRINCIPAl from T_NF_PROJECT; navicat 默认会把 REMA ...