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

    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. 11月29日 The Rails philosophy 完成rails on guide 的第一章getting started with rails

    the rails philosophy includes two major guiding principles: Don't repeat yourself: DRY is a principl ...

  2. js时间字符串转为标准时间

    //将字符串转换为时间格式,适用各种浏览器,格式如2016-09-09T17:02:37.227"function GetTimeByTimeStr(dateString) { var ti ...

  3. n!的位数 斯特林公式

    #include<iostream> #include<cstring> #include<string> #include<cstdio> #incl ...

  4. 启动mysql5.7异常The server quit without updating PID file [FAILED]sql/data/***.pi根本解决方案

    异常表现 mysql5.7启动时报错 Starting MySQL...The server quit without updating PID file [FAILED]sql/data/insta ...

  5. 删除gitlab 上的文件

  6. 基于spring的web项目启动时预加载数据到ServletContext

    1.要在web启动时预加载数据到ServletContext,实现方法有很多,一种比较简单的方案就是: 1)新建一个bean,定义其初始化方法: <bean id="beanId&qu ...

  7. k8s问题收集

    问题 解决 failed: rpc error: code = Unknown desc = NetworkPlugin cni failed to set up pod "*****&qu ...

  8. sscanf(),sscanf_s()的相关用法

    #include<stdio.h> 定义函数 int sscanf (const char *str,const char * format,........); 函数说明  sscanf ...

  9. 关于 EF 对象的创建问题

    在开发过程中,项目往往被划分为多层,而一个请求过来往往是从表示层开始一层一层向下调用,那么如果我们在不同的层中都使用到了 EF 上下文对象,而 有好几层都这么创建一个 EF 对象然后对其进行操作,那么 ...

  10. 查看某一职责下对应的菜单&功能&请求(转)

    原文地址:查看某一职责下对应的菜单&功能&请求 查看菜单&功能 SELECT res.RESPONSIBILITY_NAME 职责名称, menu.MENU_NAME 菜单编码 ...