h5 ios 滑动穿透

2024-09-01

完美解决移动端H5页面的滑动穿透问题

同事的分享,记录下来. 代码如下: css: body.modal-open { position: fixed; width: 100%; } js: // 兼容低版本 document.scrollingElement写法 (function () { if (document.scrollingElement) { return; } var element = null; function scrollingElement () { if (element) { return eleme

IOS的H5页面滑动不流畅的问题：

IOS的H5页面滑动不流畅的问题: -webkit-overflow-scrolling : touch; 需要滑动的是哪块区域,就在哪里加上这段代码就OK

bootsrtap h5 移动版页面在苹果手机ios滑动上下拉动滚动卡顿问题解决方法

bootsrtap h5 移动版页面在苹果手机ios滑动上下拉动滚动卡顿问题解决方法 bootsrtap框架做的h5页面,在android手机下没有卡顿问题,在苹果手机就一直存在这问题,开始毫无头绪,经过多次测试,更换版本,查找bootsrtap官方案例网站最终确定不是 bootsrtap框架本身的问题,然后排除网页结果问题,布局问题,js问题,样式问题,内容长度问题,所以当时想到的地方都改过测试了也没有解决. 最后只能认为的苹果手机ios的兼容性问题了,按照苹果手机 ios 拉动卡顿触屏

周记7——ios中picker滑动穿透bug

Bug描述:使用mint-ui的picker组件时,datepicker和picker在ios的webview(bug是在Hybrid App发现的)中会出现滑动穿透的现象,导致弹层后面的页面也会滚动,这使得用户体验很不好. 方案1:由于picker组件的滚动是用touch事件 + translate实现的,所以,我们可以在picker弹层出现的时候禁止页面的默认滚动机制,picker弹层消失的时候解除禁用页面的默认滚动机制. data () { return { /*---------监听函数

弹层蒙版（mask），ios滚动穿透，我们项目的解决方案

问题描述项目开发遇到一个ios独有的问题,在wkwebview中稳定复现问题: 弹出一个蒙版,当在蒙版上面滑动的时候蒙版后面的内容滚动了这当然是ios的bug,但是经过我们测试iphone7也会复现这个问题,所以没办法需要兼容. vue 弹框产生的滚动穿透问题百度了下好多思路方法1: 直接禁用滚动容器的overflow,然后记录scrollTop并恢复,这种方法不适合我们当前场景. 1. 浮层的入口有多个页面 2. 浮层后面可滚动的容器有多个(3个) 3. 滚动容器有横向和纵向滚动,很

[one day one question] iphone6 plus h5页面滑动莫名卡

问题描述: iphone6 plus h5页面滑动莫名卡,这怎么破? 解决方案: 比较奇葩的问题,在找不到任何问题的情况下,可以考虑在下发现的解决方案,html,body未添加height: 100%; ,比较惭愧的是我也不知道是什么原因导致的,但是再加上height:100%之后就好了. 君生我未生,我生君已老君恨我生迟,我恨君生早君生我未生,我生君已老恨不生同时,日日与君好我生君未生,君生我已老我离君天涯,君隔我海角我生君未生,君生我已老化蝶去寻花,夜夜栖芳草

inobounce.js : 禁止IOS H5的滑动回弹

IOS的移动端/H5/webapp 页面如果滚动到底部或者在页面顶部再往上拉,都会出现一个回弹的效果. 想取消这个效果可以引入一个简单的库就行,不用再写繁琐的样式. github地址直接引入就行 <script src="inobounce.js"></script> 例子: 因为这个库是禁止了整个页面的滑动,所以如果页面中有其他元素需要滑动的,要给滑动元素设置一个height或max-height,还有overflow: auto; -webkit-over

ios滑动回弹效果导致的穿透问题

1 给样式中去除掉下面的css样式 -webkit-overflow-scrolling:touch;/* 当手指从触摸屏上移开,会保持一段时间的滚动 */ -webkit-overflow-scrolling:auto;/* 当手指从触摸屏上移开,滚动会立即停止 */ 也就是: *{ -webkit-overflow-scrolling:auto !important; } 2 使用插件方法二:可以使用插件inobounce(但是只适用于ios系统,安卓不适用) 官网:https://git

H5滑动穿透（TODO）

https://github.com/pod4g/tool/wiki/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%BB%9A%E5%8A%A8%E7%A9%BF%E9%80%8F%E9%97%AE%E9%A2%98 https://www.haorooms.com/post/webapp_bodyslidebcdiv 有几种方法: 一: 在出现遮罩层的时候 ,让遮罩的父元素content{overflow:hidden}当遮罩层消失的时候移除这个属性二: 这个是比较彻底的方法

h5 ios手机隐藏input输入光标

前面在做一个H5中用到的6位数字密码弹框(类似支付.微信那种)时,遇到一个可怕问题,那就是在浏览器和安卓中是不显示输入光标的,但是在ios手机上光标总是能看见,像穿透一样地显示最外层. 先说下实现密码框的思路,一般是采用遮挡隐藏一个输入框,然后在输入框的上面该一层一般是一组6个<span>●</span>,然后通过点击布局是让隐藏的输入框获得焦点,最后监听input的textChange,添加对应个数的●,等于6个的时候执行相应的处理. 一开始为了达到input的完全隐藏,可谓下了

h5曲线滑动确认

h5项目需根据几条弯曲的线条让用户进行曲线式滑动,滑动时需实时响应某些样式,于是就有了下面这个实例.(可自定义多个子对象大小分别放在线条各处,以增加曲线滑动确认精度.) <!doctype html> <html> <head> <meta charset="utf-8"> <title>手机端触屏手指曲线滑动确认</title> <meta content="width=device-width,

微信H5手指滑动屏蔽微信的默认效果

我们的H5页面放在微信上时,如果你向上滑动或者向下滑动屏幕时,会发现一些微信的特征,譬如:网页由www.baidu.com提供. 去掉这个微信的特征,代码如下: var f; n.addEventListener("touchstart", function(e) { //n为h5页面的body f = e.touches[0].clientY },!1), n.addEventListener("touchmove", function(t) { var i =

android中列表的滑动删除仿ios滑动删除

大家是不是觉得ios列表的滑动删除效果很酷炫?不用羡慕android也可以实现相同的效果并且可以自定义效果,比如左滑删除,置顶,收藏,分享等等其实就是自定义listview重写listview方法.废话不多少说,上干货: 这是封装好的listview重写方法 import android.content.Context; import android.util.AttributeSet; import android.util.TypedValue; import android.view.

移动端H5开发 (滑动事件)

最近一直在做手机App H5的开发,在开发过程中,经常会遇到很多滑动事件,写个demo,分享自己的一些写法.(如写的不好,轻喷!) 直接贴代码 html css代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>touch demo</title> <style type="text/css"> #demo{

iOS 滑动比较

对iOS手机进行滑动操作进行总结:1.mobile:scroll向下滚动整个屏幕driver.execute_script('mobile: scroll', {'direction': 'down'})向上滚动整个屏幕driver.execute_script('mobile: scroll', {'direction': 'up'})向左滚动整个屏幕driver.execute_script('mobile: scroll', {'direction': 'left'})向右滚动整个屏幕dr

selenium模拟H5触摸滑动之-TouchAction

最近做移动端H5页面的自动化测试时候,需要模拟一些上拉,下滑的操作,最初考虑使用使用selenium ActionChains来模拟操作,但是ActionChains 只是针对PC端程序鼠标模拟的一系列操作对H5页面操作时无效的, 比如: # 将页面滚动条拖到底部,需要设置sleep(1) sleep(1) driver.execute_script("window.scrollTo(0, document.body.scrollHeight);") # driver.execute_

H5 IOS 虚拟键盘不回落的问题

在 H5 页面中,会发现在高版本的 IOS 系统中(ios12以上)和微信版本6.7.x以上,都会发现 input 等输入框,输入内容之后发现虚拟键盘消失,但是页面出现大面积白框. 解决办法(最后加上是否是微信浏览器): document.addEventListener('focusout', () => { setTimeout(() => { let height = document.documentElement.scrollTop || document

h5 ios输入框与键盘兼容性优化

起因 h5的输入框引起键盘导致体验不好,目前就算微信.知乎.百度等产品也没有很好的技术方案实现,尤其底部固定位置的输入框各种方案都用的前提下体验也并没有很好,这个问题也是老大难问题了.目前在准备一套与native协议来解决这个问题,目前项目中的解决方案还是有值得借鉴的地方的,分享一下业务场景固定在h5页面底部的输入框无论是使用 <input /> 还是 <div contenteditable="true"> </div> 在聚焦事件触发调起

iOS 滑动隐藏导航栏-三种方式

/** 1隐藏导航栏-简单- */ self.navigationController.hidesBarsOnSwipe = YES; /** 2隐藏导航栏-不随tableView滑动消失效果 *///- (void)scrollViewDidScroll:(UIScrollView *)scrollView {// //scrollView已经有拖拽手势,直接拿到scrollView的拖拽手势// UIPanGestureRecognizer *pan = scrollVie

ios滑动手势全屏(这段代码实现了下一级控制器滑到上一级控制器)

在自定义导航控制器里面加以下代码就增加全屏滑动手势 >推向前一个控制器 // HBNavigationController.m // #import "HBNavigationController.h" @interface HBNavigationController ()<UIGestureRecognizerDelegate> @end @implementation HBNavigationController - (void)viewDidLoad { [

h5 ios 滑动穿透

热门专题