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

    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. Confluence 6 应该如何在我的空间中组织内容

    页面和博客 你在 Confluence 中创建的任何内容,从会议记录到回顾和任何中间的内容,不管来源是博客和页面. 你的主页将是任何访问你网站中的用户首先看到的内容.为了让用户更加容易的找到他们需要查 ...

  2. 58Ajax

    Ajax 1 .客户端浏览器通过执行一段JS代码向服务器发送请求,服务器路由对应的视图函数返回一个json字符串作为响应,    浏览器接受响应后会触发该ajax请求的回调函数success,参数为响 ...

  3. yii框架中使用gii的用法

    首先在config文件中的 main-local.php中添加一句 'allowedIPs' => ['*'],如下图所示:

  4. Leetcode 1022. 可被 K 整除的最小整数

    1022. 可被 K 整除的最小整数  显示英文描述 我的提交返回竞赛   用户通过次数74 用户尝试次数262 通过次数75 提交次数1115 题目难度Medium 给定正整数 K,你需要找出可以被 ...

  5. python中json的使用

    在编写接口传递数据时,往往需要使用JSON对数据进行封装.python和json数据类型的转换,看作为编码与解码. 编码:json.dumps() Python JSON dict object li ...

  6. Java语言中的值传递与引用传递

    Java应用程序中永远不会传递对象,而只会传递对象应用,因此,按对象引用传递. (1)      Int作为参数传递时,对形参值得修改不会影响到实参: (2)      StringBuffer作为参 ...

  7. hive top n

    hive 中窗口函数row_number,rank,dense_ran,ntile分析函数的用法 hive中一般取top n时,row_number(),rank,dense_ran()这三个函数就派 ...

  8. 把旧系统迁移到.Net Core 2.0 日记(7) Tag Helpers /ResponseCache

    Tag Helpers是Html Helpers的一种替换 比如,原来的视图模型定义是这样的: @using (Html.BeginForm("Register", "A ...

  9. 关于Object.prototype.toString.call

    slice(8,-1)意思是从第8位开始(包含第8位)到最后一位之前(-1的意思就是最后一位,不包含最后一位): Object.prototype.toString.call(boj)这个是用来判断数 ...

  10. NiXi.DAY06东软实训.:面向对象思想~抽象~static~final~构造方法及其重载

    本章技能目标: 使用类图描述设计 掌握面向对象设计的基本步骤 掌握类和对象的概念 掌握构造方法及其重载 掌握封装的概念及其使用 本章单词: class:类 object:对象 static: fina ...