移动端web页面overflow失效及解决办法

最新推荐文章于 2022-06-02 16:27:57 发布
最新推荐文章于 2022-06-02 16:27:57 发布
阅读量3.7k 收藏
点赞数
文章标签： javascript 移动开发 ViewUI
原文链接：https://juejin.im/post/5ad5c946f265da238e0e3eb8
版权

最近需要实现一个从屏幕右侧飞入再飞出的动画。

但是当动画完成后，IOS中屏幕会被撑开，overflow：hidden;无效，变成可滑动状态。一顿操作后，找到了解决办法，给动画外的元素添加position，这样限制的overflow：hidden;才能生效。

转载于:https://juejin.im/post/5ad5c946f265da238e0e3eb8

weixin_34355559
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web前端知识CSS（外间距塌陷问题、overflow详解、CSS背景、CSS显示模式）
m0_72686827的博客
08-03 620
本身属性为display:block;的元素 称为块级元素常见块级元素 div,h1-h6,p,ul,li,dl,dt,ol本身属性为display:inline;的元素称为行级元素常见行级元素：span,strong,em,i,a,b本身属性为display:inline-block的元素称为行级块元素常见行内块元素：img、input(表单元素后续会讲到)没有设置宽高的时候，宽继承父元素的宽度，高度由内容撑开默认独立成行——默认垂直布局。...
总结40条常见的移动端Web页面问题及解决方案
weixin_36106791的博客
08-17 439
前言 工作中接手做过一些移动端的项目，在开发过程中，发现了一些问题，结合网友的一些经验总结，整理下移动端常见的问题，这是在前一篇基础上，整理网友的经验，希望对大家有用。 1.安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把 iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRat
【解决】Android 2.x 不支持overflow、position:fixed解决方案
kaosini的专栏
07-02 2549
Android 2.x和IOS5以下都不支持overflow:auto属性（position:fixed也不支持）。 移动端浏览器兼容性和PC端相比，有过之而无不及。操作系统版本及各式浏览器和各式的屏幕大小排列组合，你永远也无法预测到你的应用会在哪部手机上冒出什么样的问题。 测试过各种浏览器（chrome手机浏览器、百度手机浏览器、手机QQ浏览器、UC浏览器、UC浏览器HD、safari浏
移动端微信浏览器使用overflow：scroll属性实现横向滚动没效果
华山派developer的博客
06-07 1823
在写公众号网页时候，如果菜单过多的话，要实现左右滚动。然后列表内容实现上下滚动。就用了overflow-x和overflow-y的样式，结果在电脑浏览器测试时候完全没问题，但打包上传后，在微信里看上下是可以滚动的，左右完全没效果。在手机其他浏览器里正常没问题。 我是参考了这篇说在苹果浏览器中overflow不起作用的文章解决的，但实际上我的代码只是在微信浏览器上没效果，反而在safari浏览器里没问题。 解决方法： A：是父容器，加overflow样式的 C：是子容器，是具体显示需要滚动的内容。 因为需要它
web前端--overflow用法详解
A444477的博客
03-19 6048
overflow三大作用 1、隐藏溢出的内容 例如： #容器A{ width：50px； } <div id=“A“>你好啊你好啊你好啊你好啊你好啊你好啊你好啊 你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊 你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊</div> 字数过多，宽度较小，装不下自然就会超出容器。 overflow：hidden隐藏超出部分文字 auto 超出后会显示滚动条 scroll 永远有滚动条 2、解决外边距塌陷 在一个父元素中，子元素设
Android系统overflow失效的BUG
disadan2296的博客
10-16 522
昨天做项目的时候，遇到了一个奇怪的问题。 问题仅在安卓手机端自带浏览器出现。 用chrome 自适应调试 模拟安卓浏览器时无法重现问题。 安卓手机下用chrome 联机调试又没有问题，仅在安卓自带浏览器内核的情况下才能重现该BUG 这对我的调试十分的不方便。 这个BUG是这样的： 在父类的prosition:absolute / relative 的时候 父类上如果有o...
常见的移动端H5页面开发遇到的坑和解决办法
qq_35859392的博客
04-17 882
转过来，平时看看。虽然还有很多问题至今无解。比如：华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏。！！ 1、安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的9...
移动端页面布局方式，简单记录一下
weixin_55935744的博客
12-01 4131
目录1、视口2、多倍图3、移动端开发选择4、移动端技术解决方案5、移动端常见布局6、流式布局7、flex弹性布局①flex与传统布局比较②flex布局原理③常见父项属性8、rem适配布局①rem基础②媒体查询③Less基础④rem适配方案 1、视口 视口就是浏览器显示页面=内容的屏幕区域 视口分为布局视口、视觉视口、理想视口 ①三种视口介绍 （1）布局视口（了解） 用于早期的PC端页面在手机上显示的问题 这个视口分辨率设置基本为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般
移动端开发遇到的问题及解决方式
ygkyufcl的博客
03-03 1032
1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题? 首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案是： (1) 看是否能把body和html的height: 100%去除掉。 (2) 在滚动的容器中增加：-webkit-overflow-scrolling: touch或者给body增加：body...
Web移动端Fixed布局的解决方案
gs981600308的博客
07-31 814
移动端业务开发，iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下，会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。 iOS下的 Fixed + Input BUG现象 让我们先举个栗子，最直观的说明一下这个 BUG 的现象。 常规的 fixed 布局，可能使用如下布局（以下仅...
网页基础（二十一）overflow
qq_41440413的博客
03-04 625
内容溢出：overflow用于超出界面部门的处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>overflow内容溢出</title> <!-- 内容溢出：overflow ...
css overflow
web前端wyy的专栏
07-22 545
即使页面上只有一个元素它也是一个矩形的盒模型。其大小、位置、行为都可以通过CSS来控制。这里的行为是指当盒模型内部以及周围的内容发生变化时的表现。例如，如果你没有给一个盒模型指定一个高度，那么它就会随着内容的增加变得越来越高。但是如果当你为盒模型指定一个高度、而其内部的内容不能与
单行文本溢出和多行文本溢出
Dilemma_me的博客
08-28 227
单行文本溢出： .box{ width:80%;//宽度必须有 overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } 多行文本溢出： .box{ display:-webkit-box; overflow:hidden; 　text-overflow:ellipsis; 　word-break:break...
web前端-CSS(display，position，overflow和浮动float)
苏凉.py的博客
06-02 1312
display属性指定由元素生成的框的类型,通常用到display对应值有block、none、inline这三个值。下面我们来看看display的属性有哪些吧。比如：b、big、i、small、tt、abbr、acronym、cite、code、dfn、em、kbd、strong、samp、var、a、bdo、br、img、map、object、q、script、span、sub、sup、button、input、label、select、textarea等。内联元素特点：和其他元素都在一行上；宽高只与内
web前端学习（二十二）——CSS3元素的显示（display）、可见性（visibility）与溢出（overflow）属性的相关设置
热门推荐
★★光亭★★
02-02 1万+
web前端学习（二十二）——CSS3元素的显示（display）、可见性（visibility）与溢出（overflow）属性的相关设置
[Web]overflowhidden实现div最小高度
qghboy.Net专栏
09-25 687
html xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />title>IT130.cntitle>style type="text/css">...#YourHomePage_com_cn {...}{ width:100%
IOS 微信浏览器设置overflow：scroll，元素无法滑动bug---解决方案
youngeffort的博客
10-09 9440
现象：设置overflow:scroll,安卓微信浏览器无bug，ios微信浏览器出现无法滑动bug 解决方案：网上已经有了一个比较不错的解决方案以及原因分析，不再赘述：参考链接  ...
overflow:scroll 移动端失效
最新发布
07-20
针对以上情况，我们可以通过以下方法来解决移动端下 overflow:scroll 失效的问题： 1. 使用移动端特有的滚动区域组件，例如提供了滚动功能的第三方组件（如 iScroll、better-scroll 等）来替代原生的 overflow:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值