h5 iframe 不能滑动

2024-11-10

完美解决移动端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

一个H5的3D滑动组件实现(兼容2D模式)

起由原始需求来源于一个项目的某个功能,要求实现3D图片轮播效果,而已有的组件大多是普通的2D图片轮播,于是重新造了一个轮子,实现了一个既支持2D,又支持3D的滑动.轮播组件. 实现思路刚一开始肯定是无法直接实现3D滑动组件的,所以将功能拆分,如下步骤实现一个双向循环链表,作为底层Item的数据结构基于链表,实现一个无限循环的2D滑动组件基于2D滑动组件做3D变化得到3D组件兼容性检查以及功能封装,简化使用,确保稳定双向循环链表的模拟以前看到的轮播组件大多是用数组来作为底层数据结构

移动端H5页面惯性滑动监听

移动端H5页面惯性滑动监听在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑动整个过程.在网上并没有找到相应的监听事件,于是就自己写了一个监听方法. 惯性滚动开始时调用的方法是listenSlidingA,结束时调用的方法是listenSlidingEndA. <!DOCTYPE html> <html> <head> <title>滚

玩转 H5 下拉上滑动效果

在APP中我们经常会在页面下拉时看到一些动效,例如下拉图片跟随放大.下拉刷新出现loading动画等,这个交互细节在各个主流APP以及手机原生系统中随处可见,能为APP增添个性亮点. 一.背景在我们的日常项目中,也会遇到这样的需求,在当前环境下,此类效果大多是靠原生来实现的,但是用原生实现有不少缺陷,原因如下: 原生实现周期长; 跨平台实现成本高; 解决方案通用性差; 运用到现有项目改造成本高; 那么我们的H5页面能否实现呢?下面和大家一起来探索. 首先,我们先来实现下拉banner图放大的动

玩转 H5 下拉上滑动效

按照上面的技术方案实施,具体过程为: 禁用页面顶部下拉事件 ------> 将页面的主体内容用一个DIV容器包含起来,同时复制需要放大处理的内容节点至主体内容之外 ------> 绑定页面滑屏事件 ------> 计算滑屏偏移量以及缩放等数值的运算 ------> 根据变化数值主体内容transfrom下滑,同时复制的节点做放大动效处理 ------> 监听滑屏事件结束,执行回弹动效,还原初始状态代码节选片段: 要点及说明: 1.禁用页面顶部下拉事件: 该技术要

h5移动端滑动的细节

1.获取手指滑动的长度: var hasTouch = 'ontouchstart' in window && !isTouchPad, _start:function(e){ var point = hasTouch ? e.touches[0] : e; startY = point.pageY; } _move:function(e){ var point = hasTouch ? e.touches[0] : e; //offsetY就是手指滑动的垂直距离 offsetY = po

微信H5单页面滑动的时候如何避免出界，出现头部和底部的黑底？

ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法 ios偶现下拉出现黑底时,界面第一次上拉时拉不动的解决方案: document.querySelector('#app').addEventListener('touchstart', function (ev) { let a=$('#app')[0].scrollTop if($('#app')[0].scrollTop <=0){ $('#app')[0].scrollTop =1 } }); 问题分析

app内嵌 h5页面再滑动的时候触发击穿底下的一些touchstart事件

我们的目的是再滑动的时候不要触发到touchstart事件. // 再滑动的时候无法点开视频 var is_scroll_start,is_scroll_end; $(window).on({ 'touchstart':function(){ is_scroll_start=$(document).scrollTop(); }, 'touchmove':function(){ is_scroll_end=$(document).scrollTop(); }, 'touchend':functi

H5禁止页面滑动/滚动

禁止页面滚动--完美解决方案,滚动条显示与否,手持设备兼容与否禁止页面滚动有三种方法 1,依靠css 将页面 document.documentElement.style.overflow='hidden'; document.body.style.overflow='hidden';//手机版设置这个. 如果设置了如上,页面的滚动条将会消失,此时鼠标滚轮失效. 但是你用键盘的上下左右键,你会发现,页面仍然可以滚动. 别着急往下看 2,在 1 的基础上添加 js功能 va

H5使用Swiper过程中遇到的滑动冲突

一.问题 (1)PC端可以鼠标可以拖动中间的轮子让页面上下滑动,点击左键按着也是拖不动 (2)手机端浏览H5手指不能滑动页面,导致很多页面下面的文字看不到二.解决问题 1.下面分先说css的问题,主要排查overflow:hidden: 检查也有一定的顺序,检查超出高度的标签是否用了overflow:hidden:最好先检查html或body是不是加了height:100%:overflow:hidden:然后再看包裹在最外边的元素是否加了overflow:hidden; 2.再说下js方面的

RE：通过移动端滑动手势实现数据加载

背景: 基于要尝试的移动端项目需要有一个通过上拉下滑手势达成加载不同数据的功能,其涉及到滑动手势和ajax数据加载方面的知识点.故对整个实现过程做一个记录整理.个人JS功底有限,看了诸多例子和对于移动端手势知识点梳理的技术博客才做到了对功能的实现.并且也在这个过程中初步了解到了移动端框架Zepto.js._(:з」∠)_ 当然,最后还是选择了尽量用原生来实现这一功能.因为这样才能够对整个功能实现原理理解上更充分些,想尽量少依赖于插件.不过到了数据加载上,因为时间成本等原因最后

【H5】344- 微信 H5 页面兼容性解决方案

点击上方"前端自习课"关注,学习起来~ 最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了. 1.ios端兼容input光标高度问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样.例如下图,左图是正常所期待的输入框光标,右边是ios的input光标. 出现原因分析:通常我们习惯用height属性设置行间的高度和line-he

微信H5页面前端开发，大多数人都会遇到的几个兼容性坑

最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了. 1.ios端兼容input光标高度问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样.例如下图,左图是正常所期待的输入框光标,右边是ios的input光标. 出现原因分析:通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离(行高),当点击输入的时

css解决display:inline-block;产生的缝隙（间隙）

今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是需要设置父元素的宽度才能实现水平左右滚动,这样又增加了代码量,因为卡片的个数不固定,需要实时设置其父元素的宽度,就要用到js,所以代码量增加了,也不是最好的选择.看来最好的解决办法就是用到display:inline-block;了,于是缝隙的问题就出现了.代码如下: <!DOCTYPE html>

table-cell的手机应用场景

前言最近在前端观察看见了这篇老文章,看见了元素居中的5种办法,其中提到了display:table-cell这个css显示的新属性,按照当时的浏览器市场来说想必兼容性会是糟糕的一比,但是现在这坛老酒其实可以用到移动端来. 在PC端,应该很少用到 display:table-cell 这个属性,究其原因在于兼容性[IE8+以及现代浏览器才支持],或者说很少去关注这个标签.此标签的用处就是垂直居中布局功能,这个功能可以让我们不用依赖 margin:0 auto 属性达到居中的目的,并且 margi

Swiper插件

中文官网:Swiper中文网英文:英文网此插件功能比较强大,网页端.手机端都可以使用的插件.这里记录一下在微信h5页面里面滑动获取数据. 先下载css和js,引用到项目中这里有6个节点,没划一个节点去获取此节点里面的数据. 初始化插件: 也就是说,我每次滑动完毕,都会去执行GetList()方法,获取数据,下面的代码都写都是在$(function(){ 这里完成的 }) var swiper = new Swiper('.process', { touchRatio:1/parseInt

jquery 滚动事件-记录自己常用的

1.h5端页面滑动至第3屏及以后才出现置顶按钮 $(document).scroll(function() { var scroH = $(document).scrollTop(); //滚动高度 var viewH = $(window).height(); //可见高度 if(scroH > 3*viewH){ _appCache.$goToTop.show(); }else{ _appCache.$goToTop.hide(); } }) 2.滚动的时候,置顶按钮隐藏,停止滚动3s后,滚

2.15 使用web 编写一个简单记事本

首先陈列问题 (等待解决): 1. 界面是使用 H5 iframe 标签合并而成的,当窗口化之后点击任务栏,显示的内容会在任务栏的下边希望可以找其他方式替代 (其他方法不熟练,不能应用) 如图: 2. 界面的布局不是很美观,需要学习一些和布局有关的插件 3.对于录入界面当前只是简单的手动录入,对于某些条件的限制没有添加,比如需要按照某种格式来添加信息,或者提供一个选择日期的表格等等都没有添加. 4.功能不是很多.需要继续增加,没有一般手机记事本那样的方便(希望界面紧凑一点,将那些文字换成

HTML5相关文章和资源

Polyfills HTML5 Cross Browser Polyfills canvas HTML5 JS实现毛玻璃效果(高斯模糊) 高斯模糊的算法Canvas 内部元素添加事件处理应用场景 PC端web站点本地存储基于webview的hybrid native APP开发 web APP开发 (非常传统,HTML5网站 HTML5游戏) 文章 HTML5 触屏事件H5动画开发快车道----AnimateCC与createjs开发实践玩转 H5 下拉上滑动效如何打造一个高效适配的H5玩

h5曲线滑动确认

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

h5 iframe 不能滑动

热门专题