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

    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. apply、call

    call(),apply() 1.每个函数都包含两个非继承而来的方法:call()和apply() 2.在特定的作用域内调用函数,等于设置函数体内的this对象,以扩充函数赖以运行的作用域 3.app ...

  2. android -------- WIFI 详解

    今天简单的来聊一下安卓开发中的Wifi,一些常用的基础,主要分为两部分: 1:WiFi的信息 2:WiFi的搜索和连接 现在app大多都需要从网络上获得数据.所以访问网络是在所难免.但是在访问网络之前 ...

  3. apiCloud 上拉加载

    api.addEventListener({ name:'scrolltobottom', extra:{threshold:} }, function(ret, err){ //上拉加载时需要加载的 ...

  4. vue.js如何实现点击按钮动态添加li

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. linux安装curl扩展

    1.获得安装包,从网上直接下载或者其他途径,这里直接wget wget http://curl.haxx.se/download/curl-7.20.0.tar.gz 2.解压到当前目录(或者 htt ...

  6. 4月22 mysql常用函数

    一.数学函数 数学函数主要用于处理数字,包括整型.浮点数等. ABS(x) 返回x的绝对值 SELECT ABS(-1) -- 返回1 CEIL(x),CEILING(x) 返回大于或等于x的最小整数 ...

  7. 重写nyoj2——括号匹配

    #include "bits/stdc++.h" using namespace std; int comp(char s1,char s2){ ; ; } int main() ...

  8. 大数据分析引擎Apache Flink

    Apache Flink是一个高效.分布式.基于Java实现的通用大数据分析引擎,它具有分布式 MapReduce一类平台的高效性.灵活性和扩展性以及并行数据库查询优化方案,它支持批量和基于流的数据分 ...

  9. MyBatis动态传入表名

    mybatis里#{}与${}的用法: 在动态sql解析过程,#{}与${}的效果是不一样的: #{ } 解析为一个 JDBC 预编译语句(prepared statement)的参数标记符. 如以下 ...

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

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