h5页面在安卓手机浏览器上不能上下滚动

最新推荐文章于 2024-01-25 10:34:17 发布
最新推荐文章于 2024-01-25 10:34:17 发布
阅读量6.9k 收藏 3
点赞数 3
分类专栏： 笔记 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gs981600308/article/details/107019210
版权

可能是js方面的问题，主要是有在touchstart、touchmove或touchend等事件中的阻止默认事件的原因

// js文件
e.preventDefault();   //会阻止默认行为

反正我当时就是在这个上面出现问题，导致当前华为Noto10手机会页面无法正常滑动

1、当在css中加入下面样式，会导致页面无法正常上下滑动

// css 文件
{
    touch-action: none; }

解决办法：修改为默认值{ touch-action: auto; }或者删除改行样式

最低0.47元/天 解锁文章
gs981600308
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
h5页面在安卓手机浏览器上不能上下移动的问题
fly_wugui的博客
05-07 6047
1、当在css中加入下面样式，会导致页面无法正常上下滑动 // css 文件 { touch-action: none; } 这行代码后，会导致页面无法正常上下滑动， 解决办法：修改为默认值{ touch-action: auto; }或者删除改行样式 原因： CSS属性 touch-action 值说明： auto 当触控事件发生在元素上时，由浏览器来决定进行哪些操作，比如对viewport进...
移动端h5页面不能滑动，模拟器可以下滑，问题的解决办法
weixin_44450433的博客
03-10 3944
我是今年才接触html,现在画页面经常也用frontpage辅助，最近粘贴了个页面后，发现没办法再手机上滚动，所以记录一下，也顺便记录下自己的生活。 昨天做了很多梦，从上海来这边一年了，诸多不顺，技术也是从后端到前端，因为小地方，后端基本用不上，基本都是短平快的h5，小程序，公众号，很少会想着构建统一的数据服务，什么数据中台就更扯淡了。 话不多说，结果导向，好好加油！ 1、H5页面没有使用任何滚动...
移动开发H5页面在安卓机浏览器滑动登录滑块，页面跟着滑块一起滚动
最新发布
2201_75568521的博客
01-25 456
【代码】H5开发浏览器在安卓机上滑动登录滑块，页面跟着滑块一起滚动。
禁止微信内的H5页面上下拖动
QDY5945的博客
10-18 841
客户需求：禁止微信内的H5页面上下拖动； 解决方案： 网上的答案几乎都是阻止默认事件，即： 1 document.body.addEventListener('touchmove' , functio...
h5 android 滚动条卡顿,h5页面滑动卡顿解决方法
weixin_35922444的博客
05-26 2584
解决方式：给滚动的元素加样式：-webkit-overflow-scrolling: touch;-webkit-overflow-scrolling(允许独立的滚动区域和触摸回弹)如果值为auto，就是普通的滚动，手指离开就停止滚动，让人感觉有点卡顿如果设置为touch，在手指离开后还会滚一下，有回弹效果，看上去很流畅但是刚开始用的时候有个小bug，h5页面打包成app时，一开始写成了*{-we...
html5禁用浏览器下拉,禁止ios浏览器页面上下滚动 (橡皮筋效果)
weixin_34418334的博客
06-04 3785
发现之前阻止页面滚动的代码e.preventDefault代码失效了。于是自己折腾了一番，找到了解决办法。一、前言浏览器在移动端有一个默认触摸滚动的效果，让我们感触最深的莫过于微信浏览器里面，下拉时自带橡皮筋的效果。然而在开发的时候我们经常需要阻止此效果。在此先直接给一个方案，直接加上下面的代码即可：document.body.addEventListener('touchmove',funct...
h5页面在手机端出现横向滚动条解决办法
是我的温柔啊
04-08 3612
html,body{ padding: 0; margin: 0; width: 100%; height: 100%; position: absolute; left: 0;top: 0; overflow: hidden; overflow-y: auto; }
小米浏览器打开H5页面表格无法滑动，如何解决？
Superxpang的博客
01-24 659
通过上述方式，发现是浏览器的问题后，针对性的寻找解决办法，也咨询过小米浏览器的官方，但还未得到官方答复，在搜集解决办法的时候，看到有学者阐述小米浏览器的左右上下滑动可能与H5页面的操作产生冲突，随即对浏览器的配置做了改变，确实能够解决问题。小米浏览器打开H5页面表格无法滑动，出现此问题时，第一时间怀疑是代码的css样式适配问题，也做了很多样式适配的尝试，最后测试均没有解决无法滑动的问题。
h5页面如何滑动页面不触发华为浏览器默认滑动
朱远辉的博客
05-09 860
h5页面如何滑动页面不触发华为浏览器默认滑动？华为浏览器的默认滑动行为是基于内核实现的，很难彻底屏蔽或禁用。
Android手机版浏览器DIV滚动条失效解决方案
08-05
在Android平台上，开发一款手机版浏览器时，可能会遇到一个常见的问题：在特定情况下，网页中的`div`元素的滚动条无法正常工作。这个问题通常是由于Android原生浏览器或自定义WebView组件的某些特性引起的。本文将...
解决Android软键盘弹出覆盖h5页面输入框问题
01-20
6. **适配不同浏览器**：不同的Android浏览器对键盘弹出的处理可能有所不同，需要做兼容性测试，确保在主流浏览器如Chrome、Firefox、Samsung Internet等上都能正常工作。 7. **优化布局**：考虑重新设计布局，比如...
H5页面滚动加速
07-23
- 在Android平台上，可以优化纹理回收策略，在滚动过程中优先生成前方纹理，或者在性能较好的设备上使用多线程生成纹理。 - 对于Android 2.x系统，可以在滚动时使用Bitmap缓存未更改的内容。 #### 四、展望 未来...
LCalendar-master 手机h5页面友好时间选择
01-29
这个项目的核心目标是让在移动设备上进行日期和时间的选择变得简单易用，同时考虑了各种浏览器的兼容性问题，确保在不同的设备和操作系统上都能正常运行。 H5时间选择器是网页开发中的一个重要组成部分，特别是在...
用layui实现下拉框select多选,取值
热门推荐
gs981600308的博客
07-23 10万+
在layui中实现下拉框select多选,取值 html form.on('select(multi)', function (data) { // 打开控制台查看效果 onsole.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值（数组类型） console.log(data.o...
js中判断两个数组是否相等
gs981600308的博客
05-21 4万+
js中判断两个数组是否相等的方法 1、 将两个数组转成字符串比较，但是发现他们只是顺序不相等也被当做不相等 [1,2,3].toString()== [3,2,1].toString() ----false 2、我们可以先把数组排序按照从小到大的顺序sort()函数 [1,2,3].sort().toString()== [3,2,1].sort().toString() —true 这...
数组五种查询条件方法(find、findindex、indexOf、lastindexOf 、includes)
gs981600308的博客
05-28 2万+
方法一、find() 方法返回数组中满足提供的测试函数的第一个元素的值。 语法： arr.find(callback[, thisArg]) 例一、find()方法 查找数组中第一个大于等于15的元素 var num = [10,3,5,15,100,1].find(function(elem, index){ return elem>=15; }); console.lo...
input输入框type设置为number，maxlength无效
gs981600308的博客
07-31 1万+
结论：input输入框type设置为number，maxlength无效，设置为tel，maxlength有效 一个小细节，以前很少注意，直到最近做的一个项目，当我把一个输入数字的input框的类型设置为number时，input框还是可以无限输入，设置maxlengh=10就不起作用了。 然后我就去百度了一下，type设置为tel时，maxlength就起作用了。为什么呢？ 这里我先说一下inp...
JS中根据指定值删除数组中的元素
gs981600308的博客
05-23 1万+
JS中根据指定值删除数组中的元素 原生js 如果想删除数组，有一个函数 splice() ~~ 删除元素，并向数组添加新元素。 splice是根据数组内的下标 也就是索引来 删除元素的比如： var arry= ['a','b','c','d']; arry.splice(2,1); alert(arry); //下标为 2 也就是‘c’给删除了。 那么现在我们在...
安卓手机 h5页面拨打电话后页面不能滚动了
06-02
这个问题可能是由于拨打电话后，系统弹出的拨号界面覆盖在当前的 H5 页面上，导致页面无法滑动。解决方法如下： 1. 将拨打电话的代码改为使用 WebView 的 loadUrl 方法打开一个新的链接，这样就可以在新的页面中拨打电话，不会影响当前 H5 页面的滑动。 2. 可以在 H5 页面中监听 window.onblur 和 window.onfocus 事件，在页面失去焦点时（即跳转到拨号界面时），禁止页面滑动，页面重新获取焦点后（即从拨号界面返回时），恢复页面滑动。 示例代码： ``` // 禁止页面滑动 window.onblur = function() { document.body.style.overflow = 'hidden'; } // 恢复页面滑动 window.onfocus = function() { document.body.style.overflow = 'auto'; } ``` 3. 在 H5 页面中使用 CSS 的 fixed 定位，将需要滑动的内容包裹在一个 div 中，设置 div 的高度为 100% 和 overflow-y: scroll，这样在拨号界面弹出时，页面的 fixed 元素不会受影响，滑动的内容也不会被覆盖。 示例代码： ``` <style> .wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll; } </style> <div class="wrapper"> <!-- 需要滑动的内容 --> </div> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值