公司项目需要上拉刷新功能,

    mui下拉刷新组件采用固定布局,无法触发浏览器自带的隐藏地址栏功能。

  思路:

    touchmove事件监听程序中,判断滚动位置:上下顶点使用transform 移动最外层容器实现回弹。

    缺点:有标题栏和分类导航栏 fixed 到顶部,会失效。

    解决办法:transform换成relative,设置bottom实现移动。

  上拉加载、下拉刷新插件:dropload.js

**************************************

近来,上网发现固定占满屏幕的布局,上滑也可以隐藏地址栏,只需要在页面加载完后加上如下代码即可:

if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
bodyTag = document.getElementsByTagName('body')[0];
bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
};
setTimeout(function() {
window.scrollTo(0, 1)
}, 0);

transform子元素,绝对定位失效的更多相关文章

  1. 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG

    在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8 ...

  2. angular 中父元素ng-repeat后子元素ng-click失效

    在angular中使用ng-repeat后ng-click失效,今天在这个上面踩坑了.特此记录一下. 因为ng-repeat创造了新的SCOPE.如果要使用这个scope的话就必须使用$parent来 ...

  3. 子元素绝对定位absolute后,自动撑开宽度

    position: absolute;   white-space: nowrap;

  4. margin折叠-从子元素margin-top影响父元素引出的问题

    正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...

  5. 父元素相对定位后,子元素在ie下被覆盖的问题!

    <div id="append_parent" style="position: relative;"> <div id="zoom ...

  6. 解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题

    受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上  ove ...

  7. 关于在transform下的子元素设置fixed无效的困惑

    最近的项目是要实现一个点击显示隐藏边栏的效果,而且需要边栏随着滚动而滚动. 思路简单,不就一个css的动画和一个position为fixed,搞定!但不想,设为fixed的子元素竟然无法fixed,这 ...

  8. css子元素添加绝对定位,不添加top、left会有影响吗???

    子元素设置absolue,不设置top以及left值会有什么影响呢? 代码如下: .parent { width: 500px; height: 500px;   overflow: hidden; ...

  9. 您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭

    一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...

随机推荐

  1. 使用C#读取网站相对路径文件夹下所有图片

    public JsonResult GetCourseInitCover() { //设置相对路径 string imgurl = Server.MapPath("~/Content/ima ...

  2. Build Castles(构建城堡)

    Charlemagne, the King of Frankie, 英文描述 请参考图片中的说明. 中文描述 根据给出的数组确定能够盖多少城堡. 思路和点评 我不能确定我的思路是正确的,也欢迎大家参与 ...

  3. elasticsearch查询语句

    1,安装es 安装java环境 # java --versionjava version "1.8.0_65" Java(TM) SE Runtime Environment (b ...

  4. CF1114E Arithmetic Progression

    给定一个打乱的等差数列,每次两种操作. 1.查询一个位置. 2.查询是否有比x大的数字. 一共60次操作. sol: 30次操作即可二分出首项. 剩下30次操作查询出30个位置然后两两做差取gcd即可 ...

  5. C/S和B/S 《JavaWeb开发王者归来》学习笔记

    RCP 桌面程序(Desktop Program)也叫胖客户端程序(Rich Client Program),需要安装到计算机上才能运行.例如:word,excel,QQ等. TCP 瘦客户端程序(T ...

  6. 20165309 技能学习经验与C语言

    技能学习经验与C语言 技能学习经验 你有什么技能比大多人(超过90%以上)更好?针对这个技能的获取你有什么成功的经验?与老师博客中的学习经验有什么共通之处? 从小到大,或是出于兴趣.或是出于父母的要求 ...

  7. 一、JAVA内存区域与内存溢出异常

    在虚拟机自动内存管理机制的帮助下,不在需要为每一个操作区写相对应的delete/free代码来进行内存释放.进而不容易出现内存泄露和内存溢出的问题,由虚拟机管理内存,貌似这一切看起来很好.也正是因为j ...

  8. Linux -- 基于zookeeper的java api(二)

    Linux -- 基于zookeeper的java api(二) 写一个关于基于集群的zookeeper的自定义实现HA 基于客户端和监控器:使用监控的方法查看每个注册过的节点的状态来做出操作. Wa ...

  9. Hadoop--之RPC开发

    Hadoop--之RPC开发   介绍: 百度百科: RPC(Remote Procedure Call)—远程过程调用,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.R ...

  10. Django知识点梳理

    Django囊括.杂糅了 前端.数据库.Python知识看起来比较复杂! 其实就是由http请求周期为主体,延伸出来的知识 .  PythonWeb服务器网关接口(Python Web Server ...