IOS系统不兼容position: fixed;属性的解决方案

最新推荐文章于 2022-11-29 16:57:33 发布

转载最新推荐文章于 2022-11-29 16:57:33 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Neilisme/p/9417867.html

本文介绍了一种在iOS设备上解决使用CSS position:fixed;属性时出现明显抖动的问题的方法。通过为外层div设置特定的CSS样式，如position:fixed;top:50px;bottom:50px;overflow:scroll;可以有效地消除抖动现象，同时无需借助额外插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

position: fixed;属性在IOS系统手机上会有很明显的抖动，解决方式：

只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果，无需插件。

让顶部和底部固定不动的DIV和中间内容部分的DIV脱离开的方法就是让中间部分超出内容出现滚动条。

转载于:https://www.cnblogs.com/Neilisme/p/9417867.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30249203

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【已解决】IOS设备中position:fixed抖动问题

Linda的前端开发路

06-13

4967

IOS设备中position:fixed抖动问题的解决方案

iOS中position:fixed吸底时的滑动出现抖动的解决方案

热门推荐

pretty sunshine

06-29

1万+

两种抖动为什么抖动还会有两种？其实是我碰到过两种抖动的场景，第一个场景是native的抖动，第二个场景是h5的抖动。 native的抖动前端开发人员会在app中打开webview，这个时候iOS中position:fixed吸底时的滑动出现抖动应该是native造成的抖动，整个viewport跟着动，所以可以在生成schema的时候将参数bounce_disable（可能不一定都...

参与评论您还未登录，请先登录后发表或查看评论

IOS系统不兼容position: fixed；属性的解决方案

weixin_46246967的博客

05-02

584

IOS系统不兼容position: fixed;属性的解决方案

ios position: fixed 问题

Kayson13的博客

08-04

2250

为了解决卡顿的问题，添加了如下代码 -webkit-overflow-scrolling: touch; 但是在ios上发现，利用fixed进行底部固定，出现bug 具体现象是：在我滚动的时候，原本应该固定在底部的按钮，跟着滚动来回跳动，知道滚动结束。原因查找资料发现： position:fixed在苹果的产品中并没有实现相对浏览器窗口定位。其实现的功能是相对最近的允许滚动的元素定位，且不能遮罩滚动元素的兄弟元素及其所有父元素的兄弟元素。解决方法：在fixed所在标签添加如下样式

ios苹果手机position：fixed的兼容性以及无法定位到全局的问题

weixin_53296753的博客

11-29

5587

首先大家知道position：fixed；这个css属性在任何环境下都有可能会被阻断，也就是无法作用于全局。所以要想我们在项目中的遮罩蒙版等作用于整个屏幕，要将其所有的父级元素css中的overflow置为visible，但是这又是不现实的。也就是说，当父级元素中有含上面几个css属性的时候，你写的模态框，透明背景等等，就不能覆盖整个屏幕了。可以试试在父级加入下面的css：那么fixed的范围就是加入这个属性的元素。ios5以上的手机确实兼容了position:fixed，简单粗暴的，用js控制下。

移动端采坑：Position: fixed 在Safari上的Bug

weixin_30664615的博客

09-12

742

Position: fixed 在IOS上的显示效果会出现两种情况: 点击fixed定位的元素会出现fixed定位失效导致的元素贴向底部，即position: absolute，bottom: 0px;的情况点击fixed定位的元素，元素向上移，定位生效，位置偏移大 解决方案 - 仅针对Safari 给fixed定位元素设置一个点击事件，在点击事件会调函数中加入 window.scroll...

iphone safari不支持position fixed的解决方法

09-05

总的来说，对于那些仍需支持较旧iOS版本的项目，文中提供的解决方案是一个实用的技巧，而对于新设备，可以直接使用`position: fixed`来创建固定定位的元素，享受更佳的性能和兼容性。在进行移动Web开发时，了解这些...

position:fixed 底部展示不全

最新发布

07-17

</think>### position: fixed 元素底部显示不全的解决方案 当使用 `position: fixed` 定位元素时，元素在底部显示不全的问题通常源于视口限制、父元素滚动或CSS布局冲突。尤其在移动端（如iOS），`position: fixed`...

position:fixed 底部显示不全问题

07-17

3. 提供解决方案： - 方法1: 设置viewport元标签，添加viewport-fit=cover。 - 方法2: 使用CSS变量或安全区域insets来处理。 - 方法3: 避免position: fixed，使用position: sticky或flex布局。 - 方法4: ...

小技巧css解决移动端ios不兼容position:fixed属性，无需插件

kaosini的专栏

12-04

2875

移动端开发仿app头部底部固定设置position:fixed，android2.2以上已经实现。但是在ios8以下系统，当小键盘激活时，都会出现位置浮动问题。如图：如何解决：查阅资料之后想到一下几种解决方法 1，使用position：absolute模拟 window.onscroll=function(){ $(".fi

ios手机底部input不兼容fixed（被键盘影响）

JustinCai的博客

06-28

1547

var u = navigator.userAgent, app = navigator.appVersion; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isiOS) { $('textarea').focus(function () { window.setTimeou

苹果手机页面不兼容问题——mui

努力给自己想要的

08-29

4739

近期，客户打电话来说系统出现了一个问题，就是苹果的手机页面不能往下滑动，导致数据显示只有一页，很多数据都不能显示。情况如下：但是在安卓手机上很正常，经过分析，和js和ajax都没有关系，那么就只可能是和mui框架或者iframe标签有关系了，找到原因后就可以定位解决了。具体的原因是因为mui的框架样式不兼容苹果手机的浏览器，css样式有两个属性可以完美的帮助我们解决这个问题。我...

Vue指令可拖动元素，兼容PC和移动端

warmbook的博客

03-04

1542

Vue.directive('movable',{ bind(el){ let agent=window.navigator.userAgent.toLowerCase(),start,move,end //判断当前是移动端还是PC，移动端监听touch，PC监听mouse if(["android","iphone","symbianos","windows phon...

IOS端固定定位position:fixed失效问题（收藏）---适用于vue项目不适用于weex项目

sally18的博客

11-21

3258

<body>  <div class="header"> </div>  <div class="main"> <div class="content">  </div&g...

ios系统针对底部input设置fixed的输入框不兼容问题

qq_32601115的博客

11-14

831

标题：工作一年遇过的首个大坑—ios系统针对底部input设置fixed的输入框不兼容问题 1、页面要求如图 2、针对fixed不兼容可以使用下面方法：// CSS .scrollWrapper { position: absolute; left: 0; right: 0; bottom: 0; top:0; } bottomInput {

解决ios4下不支持position:fixed的问题

front_end_fan

02-06

603

前言：参考1 参考2 参考3 自以为解决了所有IOS系统关于position:fixed的所有问题，看来还是没有，特在此补充！！！一、注意：不要在 fixed 元素中使用 input / textarea 元素。在 android 手机下 fixed 表现要比 iOS 更好，软键盘弹出时，不会影响fixed元素定位；还是保留之前的态度，依然不推荐在 Android下使用 iS

如何解决IOS系统下fixed定位布局失败的兼容问题

小杨吔包的博客

04-16

2379

在开发移动端页面特别是各种程序封装的h5APP中，我们常常会需要加上下导航栏的功能，在移动端和PC端用position:fixed就能解决，但是实际过程中在IOS端常常会遇到不兼容的问题，比如页面滑到一半置顶就消失，在网络上找了很多方法，都不是很实用，于是在研究了一下。简单来说,就是用absolute定位来代替fixed定位...