解决IOS移动端固定定位失效问题

最新推荐文章于 2022-04-21 10:39:03 发布

aoxi9939

最新推荐文章于 2022-04-21 10:39:03 发布

阅读量985

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/theblogs/p/10495029.html

版权

在iOS系统中，遇到position: fixed;元素无法在底部固定的问题，通常表现为随页面滚动而移动。针对这一常见问题，可以探索解决方案，确保在iOS设备上实现预期的固定定位效果。

摘要由CSDN通过智能技术生成

根据浏览器窗口position:fixed; 定位在底部的元素，会随着屏幕的滚动而滚动，在iOS系统上不起作用。

<div class="header">头部</div>
 
<div class="main">
      <div class="content">
           <!-

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

aoxi9939

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

h5开发网站-css实现页面的背景固定定位；以及安卓ios手机端兼容问题

weixin_48596030的博客

09-05

1156

在页面滚动时，背景图片保持不变，而不是跟随滚动。

移动端 position:fixed; 定位在iOS系统上失效，该怎么解决

热门推荐

贵林之恋的博客

01-30

4万+

今天公司运营人员在苹果手机上浏览页面时发现一个bug，就是根据浏览器窗口position:fixed; 定位在底部的元素，会随着屏幕的滚动而滚动，在iOS系统上失效，随后让我改。自己在网上搜了一些解决办法，最终觉得以下办法相对简单。如果有更简单的办法，欢迎各位大神互相交流，解决办法如下： html我就不写了，有兴趣的可以看看我修改的项目点击打开链接把需要用手滑动的内容用clss为.conte

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

IOS使用固定定位遇到的问题

weixin_30256505的博客

08-23

348

　　近日需要实现移动端页面额外功能按钮，即点击加号弹出点赞与留言功能，通常这个按钮都会固定于页面的右下角，首先就想到使用固定定位来实现。　　但是在测试时我们发现，在IOS中，当系统键盘弹出时，fixed会失效，加号按钮会随着键盘的弹出，而被顶到键盘的上方。后来在网上搜索了一下，发现很多开发者都有遇到过这个问题，因为电商网站会有很多这种需要用到固定定位的场景，于是去到淘宝的移动端页面...

IOS 固定定位失效的分析与解决办法

EsquireY的博客

04-01

1539

1，固定定位失效首先查看是不是固定定位没有应用上（IOS和Android 都测试一下）猜想一，父元素使用了 transform 属性解决方案 // 解决方法： .father{ transform:none; // 或者 display：inline; } 2， IOS固定定位失效这里总结一下其他作者的观点，尽量不要用固定定位。那你要说我不，那也不是没有办法。在确定不是因为 transform 属性的前提下，可以试试一些现成的组件（vant 的吸顶组件也可以达到 positio

H5移动端底部固定ios兼容

brevey的博客

01-04

2062

问题一、之前写的底部导航栏固定用的是绝对定位（fixed）做的，在安卓是没问题的，但在ios无法固定住（原因：安卓是相对浏览器做的定位，ios是相对滚动条做的定位，这个原因不是很确定啦，表述可能会有问题，看到的小伙伴可以略过啦~）解决方法：页面中不使用绝对定位（fixed），改为页面100%布局。 ...

ios 中position:fixed定位问题，随着页面滚动一起滚动

Your_Smile_的博客

09-06

6415

参考 https://www.jianshu.com/p/ef17f90cffa2

CSS中absolute定位时left，right，top，bottom不起作用

xw1193195009的博客

04-21

2747

CSS中absolute定位时left，right，top，bottom不起作用今天在写样式的时候发现盒子内部使用absolute定位时，left：30%不起作用，经多次实验发现，原因是上层盒子定位问题，将上层盒子的定位改为relative即可。 ...

如何解决IOS 下固定定位fixed 失效问题？

04-26

1494

如何解决IOS 下固定定位fixed 失效问题？相信大家在做移动端项目时都会遇到fixed失效的问题，在这里我们说的是在ios 下，头部底部都采用固定定位时，滑动中心部分时整个页面都跟着滚动也就是说固定定位失效了。那么如何解决这个问题呢？这里有个小诀窍分享给大家。 <body>  <div class="hea...

关于canvas.toDataURL 在iOS运行失败的问题解决

11-19

尽管尝试过降低尺寸但仍无法解决问题，可能是其他因素导致的。 4. **MIME类型**：`canvas.toDataURL()`支持的MIME类型包括'image/png'、'image/jpeg'和'image/webp'。确保使用的MIME类型是被iOS设备支持的。 5. **...

ios fixed定位bug位置偏移

AIGC大前端小王子

10-30

1679

本文主要介绍移动端input获取焦点时，IOS固定定位fixed失效，位置偏移。一、场景描述 移动端ios下，input获取焦点时，固定定位的fixed会转化为absoult属性，滚动条滚动超过可视区域，导致位置偏移。二、解决方案 2.1将fixed的定位与滚动区域分离成2个部分 2.2滚动区域做absoult布局三、CSS代码 .nav-wrapper{ // 顶部fixed布局 ...

解决 - 移动端(H5) ios 在点击input输入框,弹起软键盘后,顶部输入框失效的问题

我仰泳一级棒

03-17

2484

问题: 在项目开发过程中发现这个问题,在安卓下是正常的,ios固定定位就会失效,在网上看了许多ios兼容的博客,都没有效果,卡了很久, ios 的软键盘弹出后,会把页面撑高.他就不在原来的位置定位了后面同事提了个思路,当我点击搜索框的时候,会弹出软键盘,往上滑的话,搜索框也会跟着滑走,那我们就在滑动上做文章.往上滑的时候(或者点击屏幕的时候) 让软键盘消失就ok了,那么页面就不会被撑高了 vue开发代码 mounted () { document.body.addEventListener('to

fixed在移动端失效的问题

thebigbuding的博客

03-04

5994

其实在安卓机上fixed的适应性要远远比ios上好，真是接地气啊哈哈。之前第一次遇到这个问题的时候非常惊讶，那时候在用sui mobile的组件库，里面就有底部导航栏，用了fixed。但是随着屏幕向上滚动，超过一定距离，这个底部导航栏竟然也跟着上去了。并且在我的安卓机上是没多大影响，但是在ios上就这样了。不过我同事的安卓机竟然比在ios上还夸张。什么原因导致的？经过我多方调研，其实移动端在早些年以

vue项目移动端position: fixed；不生效原因及解决方案

weixin_42280496的博客

07-22

5222

1.问题描述：我用vue做的是一个官网，现在要适配移动端。就如大部分的移动端页面那样，顶部有个固定定位的导航栏。我们这个官网在pc状态时也是有的，但是固定定位(position: fixed;)在pc时是没问题的，切换成移动端后，css里写了position: fixed但并没有生效，div还是会跟着滚动轴的滑动而被卷起来。 2.解决问题： ①百度后发现大多的解决方式就是在父或上级或上级上级 … 找有没有设置transfrom这个css属性，如果有的话把它的值改为none或者直接去掉。【我的项目里没有

解决ios固定定位失效问题

LPLIFE的博客

01-17

4696

1.把需要固定定位的拆分出来，单独的一层 2.需要滚动的单独一层 3.看到最后需要滚动的 height: 100%; margin: 0 auto; position: fixed; top: 0; left: 0; bottom: 2px; overflow-y: scro...

移动端左右滚动导航，以及解决微信端不支持滚动导航touchmove的问题

cold_Blooder的博客

05-04

616

今天开发一个移动端的左右滚动导航，用到了touchmove属性。本地测试没问题，放在移动端的浏览器也没问题，微信开发工具里也没有问题，但是放在微信公众号里打开之后，滑动效果不起作用。从网上找了一下解决办法，原来是要在touchmove方法里先调用一下event.preventDefault();。至于原因就不说了，大家可以去百度。下面为大家附上代码：这是修改前的代码：//左右滑动导...

移动端— position: fixed;固定定位解决方案

diaopinglan6176的博客

05-21

2612

这里有个关键的东西叫做viewport，你经常在页面的头部里可以见到它： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 想起来了吧，就是它让你的页面不会像在桌面上那样显示，玩过windows的放大镜功能吧，你可以把viewport想象成一个类似的放大镜，fixed的元素是相对...

移动端 position:fixed; 定位在iOS系统上失效，该怎么解决

weixin_43244655的博客

11-27

5169

把需要用手滑动的内容用clss为.content（名字随便起）的div包起来，样式代码如下： .content { position: fixed; top: 0; left: 0; bottom: 180px; /*距离底部的距离为底部盒子的高度，自己也可以设置*/ ove...