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,按照需求对其进行定位,此时在滑动页面中间的内容部分时,加号按钮始终处于原来的位置,并且在系统键盘弹出时,也不会影响到它,这样就用绝对定位实现了固定定位的效果。

  • 相关阅读:
    C语言经典例题
    准确判断网络连接方式和当前连接状态
    [WMI实例]在网络连接断开时通知用户
    SciTE设置
    WQL语言初步
    以管理员身份运行bat
    AHK Primary
    AHK Run as Administrator In AHK
    为.VBS和.JS文件添加右键以管理员运行菜单
    PowerShell 随笔
  • 原文地址:https://www.cnblogs.com/Miracle-ZLZ/p/7418292.html
Copyright © 2011-2022 走看看