小米浏览器左右滑动失效

于 2024-05-08 14:58:54 发布
阅读量710 收藏
点赞数 2
分类专栏： web H5兼容性 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MISSNext/article/details/138572497
版权

问题原因：

在移动端H5项目中 搜索关键词一行展示 左右滑动。华为、苹果手机滑动没有问题，小米自带浏览器滑不动。有可能是小米浏览器左右滑动和页面产生了冲突

解决方法：

打来【浏览器设置】 找到【网页浏览设置】 点击 【左右滑屏手势】 修改成【无操作】 并退出浏览器，重新打开即可

MISSNext
关注
专栏目录
H5左滑动不能单独滑动问题和上下滚动不了问题的解决办法
Brightkar的博客
04-03 1930
如下代码： $(’.ul-text’)是页面的N个列表，可以不要，直接写上下面的touchstart,touchmove,touchend,来获取屏幕的X，Y。 和获取滑动距离。在这里呢，会有一个默认事件，不阻止的话，你的左滑动和在浏览器开启H5页面的时候，不会单独的执行你滑动的那单独列表，会全部同时滑动，所以你得阻止默认事件，在你需要的左滑动，或者右滑动的判断里面，写上： // ...
小米java后台面经
buptpxy的博客
09-15 1370
小米面经 总结：一面问了比较久项目，一个算法题，几道基础知识题；二面都是基础知识题。如果能对基础知识题都给出比较深入的讲解，会给面试官留下比较好的印象。 计算机网络： 1、iso七层协议都干了什么 速记：物数网传会表应 物理层：用物理设备例如网线光纤等传输透明的比特流，工作在物理层的设备有中继器（放大信号等）和集线器（将网线集在一起，多端口的中继器） 数据链路层：将比特封装成帧，在以太...
阻止移动端H5开发浏览器默认左右滑动行为
最新发布
weixin_51737813的博客
03-09 855
html{ touch-action:none; } //此时上下左右都不可滑动 --------改动 html{ touch-action:none; touch-action:pan-y; }
解除小米浏览器限制,小米浏览器 javascript
神经网络爱好者
11-10 382
retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍那么，前端的应对方案是：设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2//例如图片宽高为：200px*200px，那么写法如下其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px。
小米浏览器打开H5页面表格无法滑动，如何解决？
Superxpang的博客
01-24 784
通过上述方式，发现是浏览器的问题后，针对性的寻找解决办法，也咨询过小米浏览器的官方，但还未得到官方答复，在搜集解决办法的时候，看到有学者阐述小米浏览器的左右上下滑动可能与H5页面的操作产生冲突，随即对浏览器的配置做了改变，确实能够解决问题。小米浏览器打开H5页面表格无法滑动，出现此问题时，第一时间怀疑是代码的css样式适配问题，也做了很多样式适配的尝试，最后测试均没有解决无法滑动的问题。
网站不能进行左右键操作，解决方法
weixin_60387745的博客
07-26 548
网站不能进行左右键操作，解决方法
CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
aijiagui7454的博客
10-13 1670
CSS中"overflow:scroll"默认是左右，上下都滚动。怎么设置只上下滚动而不左右滚动，下面有个不错的解决方法 CSS中"overflow:scroll"默认是左右，上下都滚动 如何设置成：当长度超出DIV长度的时候，只有上下滚动，左右无论超出多长都不滚动，也不会出现下面的滚动杆？ 如果左右没有超出内容时，用overflow:auto; 如果左右有超出内容，用overf...
CSS中"overflow:scroll"可不可以只上下滚动，左右不滚动
热门推荐
shao.bing的专栏
10-12 1万+
CSS中"overflow:scroll"默认是左右，上下都滚动 如何设置成：当长度超出DIV长度的时候，只有上下滚动，左右无论超出多长都不滚动，也不会出现下面的滚动杆？ 如果左右没有超出内容时，用overflow:auto; 如果左右有超出内容，用overflow-x: hidden; 不过IE本身也是有问题的： 在设置Frame时，有一属性是scrolling="ye
小米手机touchend不触发问题
大白的博客
07-22 894
记录一个问题： touch的相关事件是页面上经常使用的，但是在小米手机上touchend事件竟然没法监听，事件光开始了，却怎么也停不下来。 $("#btn").on({ touchstart: function(e){ console.log('按下') }, touchend: function(e){ cons...
js-小米手机上下滑动
xiaowei的博客
11-26 717
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 512px; height: 400px; margin:100px au
浏览器兼容性问题
msy_msy的博客
06-13 1015
最近面试有几家公司问到了兼容性问题，还有移动端的兼容问题，所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。     浏览器兼容问题一：不同浏览器的标签默认的外补丁和
小程序scroll-view左右滑动失效问题
路了个飞的博客
10-30 2441
先说一下需求： 每一行商品数量超过三个的时候需要左右滑动，在小程序中明显需要使用的scroll-view组件，我们在scroll-view中中循环生成多个view标签，因为view都是块元素，自然是每一个ciew占一行的排列方式。这时候就要让view横向排列一行： 1、在scroll-view上使用display:flex,flex-direction:row;没有预期效果 2、在vie...
css:touch-action导致安卓无法滚动页面
weixin_34150830的博客
10-22 1912
前言 相信大家搜css touch-action很容易搜到一批文章，但感觉自己还是需要写下自己这这个过程中的一些探索经历。 之所以写，是因为单独去学知识点或者单独看一篇文章其实很简单的，难的是在自己实践中，因为一个问题找一个方案，然后又引起另外一个问题，而这个不断发现问题的过程非常低效，需要各种尝试和理解。 使用css touch-action的原因 在其官方的说明中：是否，以及以何种方式，给定...
禁止手机浏览器左右滑屏 后退 前进
weixin_30906701的博客
09-26 4577
$('body').on('touchmove','.slidebg',function () { $(document.body).on('touchmove.prevUC', function(e) { e.preventDefault(); }); }); $('body').on('touchend','.slidebg',func...
移动端滑动验证浏览器屏幕会跟着滑动验证移动的问题
qq_32183927的博客
03-04 9348
解决方法一： html{ touch-action:none; touch-action:pan-y; } 解决方法二： var startX,startY; document.addEventListener(“touchstart”,function(e){ startX = e.targetTouches[0].pageX; startY = e.targetTouches[0].pageY; }); document.addEventListener(“touchmove”,function(
关于小程序 scroll-view 左右横向滑动没有效果（无法滑动）问题
weixin_30528371的博客
09-28 926
小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分，在这次项目中刚好需要用到横向滑动，但在测试过程中发现横向滑动没有了效果（静止在那里没移动过），经调试发现： 1.scroll-view 中的需要滑动的元素不可以用 float 浮动； 2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的； 3.scroll-view ...
uniapp 手机端滚动不可用问题解决
鱼爱喝可乐的博客
08-30 2278
uniapp 手机端滚动不可用问题解决 H5、小程序页面
H5开发：H5如何设置head头部与做到咯浏览器适配
Generon的博客
07-25 1万+
meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 name="format-detect
小程序页面左右滑动如何解决
程邓楠的博客
07-24 2755
1、css解决 //最外层父元素 width:100%; overflow-x:hidden; 2、pages.json中配置 { "path": "platforms/mp-weixin/mine/mine", "style": { //disableScroll:控制当前页面不可滑动 "disableScroll": true } }, disableScroll Bool
移动端页面居然只能上下滑动，不能左右滑动，没想到坑在这....
JIA_CHENG的博客
05-08 3346
最近遇到一个问题，有一个移动端的页面，有一行tab标签 超出宽度应该是要能够横向滑动的，但是现在只能通过电脑触控板的横向滑动才能滚，手机的触摸完全不行 虽然我不知道一个已经运营两年的页面，这个bug都没测出来，是啥情况.... 但bug来了，该解决的还是要解决 一开始我自然就开始了我的搜索之旅，发现绝大多数的回答都是 添加touchmove的监听，或者添加-webkit-overflow-scrolling:touch;的css 在我这都不顶用，唉，既然广大网友没法提供思路，就只能自己来了 接
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值