zoukankan      html  css  js  c++  java
  • IOS使用固定定位遇到的问题

      近日需要实现移动端页面额外功能按钮,即点击加号弹出点赞与留言功能,通常这个按钮都会固定于页面的右下角,首先就想到使用固定定位来实现。

      但是在测试时我们发现,在IOS中,当系统键盘弹出时,fixed会失效,加号按钮会随着键盘的弹出,而被顶到键盘的上方。后来在网上搜索了一下,发现很多开发者都有遇到过这个问题,因为电商网站会有很多这种需要用到固定定位的场景,于是去到淘宝的移动端页面,发现他们是通过使用绝对定位来实现固定定位的效果。方法如下:

    页面结构如图

      首先设置一个box,大小等于页面窗口的大小,设置属性position:relative;盒子顶部与底部部分设置好高度,使用position:absolute,分别将top和bottom设为0,中间内容部分的高度通过js动态设置为页面高度减掉顶部和底部栏的高度,并设置为positon:absolute,top等于顶部栏的高度,设置其属性overflow:scroll,另外可再加上

    -webkit-overflow-scrolling: touch;可以使中间部分滑动更加顺畅,接近于原生app。最后设置加号按钮的position:absolute,按照需求对其进行定位,此时在滑动页面中间的内容部分时,加号按钮始终处于原来的位置,并且在系统键盘弹出时,也不会影响到它,这样就用绝对定位实现了固定定位的效果。

  • 相关阅读:
    Mysql字段约束
    MYSQL中数据类型介绍
    Redis常见的几种使用方式及其优缺点
    python解析jason串,数据存入数据库
    redo log
    Oracle控制文件(Control Files)
    笔记
    redis面试题
    mysqldump备份
    超简单的内网穿透技巧(使用花生壳进行内网穿透)
  • 原文地址:https://www.cnblogs.com/Miracle-ZLZ/p/7418292.html
Copyright © 2011-2022 走看看