解决ios固定定位失效问题

1.把需要固定定位的拆分出来，单独的一层

2.需要滚动的单独一层

3.看到最后

需要滚动的

        height: 100%;margin: 0 auto;position: fixed;top: 0;left: 0;bottom: 2px;overflow-y: scroll;width: 100%;height: auto;-webkit-overflow-scrolling: touch;

固定定位：

        position: fixed;bottom: 0;left: 0;right: 0;display: flex;justify-content: space-around;text-align: center;align-items: center;height: 98px;background: #fff;

但是这个有一个不好的地方是，写好的pc端其他页面会很乱（虽然是做移动端的，但是pc也不能乱）

一个更好的方式是：单独抽出来后，改需要滚动的内容而已，（需要把body，html设置的overflow去掉，给需要的地方加上，其实就是在内容的最外层包裹一层div，添加以下代码）：

        margin: 0 auto;overflow-y: scroll;width: 100%;

很诡异地解决了

解决ios固定定位失效问题相关推荐

IOS 固定定位失效的分析与解决办法
1,固定定位失效首先查看是不是固定定位没有应用上(IOS和Android 都测试一下) 猜想一,父元素使用了 transform 属性解决方案 // 解决方法: .father{transform ...
【H5】解决ios禁止缩放失效的方法
[H5]解决ios禁止缩放失效的方法参考文章: (1)[H5]解决ios禁止缩放失效的方法 (2)https://www.cnblogs.com/gentle-Lee/p/12154924.html ...
固定定位失效问题（position：fixed;固定定位）
PC端项目: 父级设置了transform: translate(0, 0);后,子级的固定定位会失效:(解决办法,去除父级的transform: translate(0, 0); 即可) html: ...
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题参考文章: (1)解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题 (2)https://www.cnblogs.com/zlfP ...
解决固定定位position: fixed；变成了绝对定位随屏幕滚动的问题
在一次vue项目开发中发现按钮设置成固定定位后,依旧随屏幕滚动,变成了相对定位的效果. 查阅资料后发现: 父级元素设置有效的transform属性会导致子元素固定变成绝对元素, 此时会导致子元素和父级 ...
CSS 之 posiiton：fixed 固定定位在父元素含有 tranform 属性时会失效，变成 absolute 的效果
一.简介今天在网上看到了一条言论说:子元素posiiton:fixed 固定定位在父元素含有 tranform 属性时会失效,变成 absolute 的效果.虽然这个场景,我还没有在实际工作中用到过 ...
postionfixed固定_详解如何解决position:fixed固定定位偏移问题
问题 css固定定位position:fixed很容易使用,就是相对浏览器的viewport进行定位,top:0;left:0就是在左上角. .container{ width: 100px; hei ...
解决ios的webview中上/下拉露出黑灰色背景问题
解决ios的webview中上/下拉露出黑灰色背景问题问题描述:手机H5页面在ios的webview中,下拉(或上拉)会露出黑灰色背景 ,感觉很不好看,现在想要去掉这个背景解决方法: 1.touc ...
Flutter开发之iOS后台定位开发详解
Flutter开发之iOS后台定位开发详解需求目的开发一个功能持续获取用户的位置发送给后端,PC端会根据后端传来的移动端发送的位置信息,来绘制使用者的运动轨迹. 实现需求是否实现后台定位 ✅ ...

解决ios固定定位失效问题

解决ios固定定位失效问题相关推荐

最新文章

热门文章