transform子元素,绝对定位失效
公司项目需要上拉刷新功能,
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子元素,绝对定位失效的更多相关文章
- 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG
在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8 ...
- angular 中父元素ng-repeat后子元素ng-click失效
在angular中使用ng-repeat后ng-click失效,今天在这个上面踩坑了.特此记录一下. 因为ng-repeat创造了新的SCOPE.如果要使用这个scope的话就必须使用$parent来 ...
- 子元素绝对定位absolute后,自动撑开宽度
position: absolute; white-space: nowrap;
- margin折叠-从子元素margin-top影响父元素引出的问题
正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...
- 父元素相对定位后,子元素在ie下被覆盖的问题!
<div id="append_parent" style="position: relative;"> <div id="zoom ...
- 解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题
受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上 ove ...
- 关于在transform下的子元素设置fixed无效的困惑
最近的项目是要实现一个点击显示隐藏边栏的效果,而且需要边栏随着滚动而滚动. 思路简单,不就一个css的动画和一个position为fixed,搞定!但不想,设为fixed的子元素竟然无法fixed,这 ...
- css子元素添加绝对定位,不添加top、left会有影响吗???
子元素设置absolue,不设置top以及left值会有什么影响呢? 代码如下: .parent { width: 500px; height: 500px; overflow: hidden; ...
- 您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭
一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...
随机推荐
- (未完成👃)You Don't Know JS: Scope & Closures (第5章: Scope & Closures)
Chapter 5: Scope Closure 我们到达这里时,已经对作用域如何工作有了非常健康稳固的理解. 下面,我们转移注意力到一个及其重要,但长期难以理解,几乎是神话中的部分语言:Closur ...
- 0.11内核rd_load@ramdisk.c中memcpy函数好像有bug
0.11内核rd_load@ramdisk.c中memcpy函数好像有bug,如:#define memcpy(dst,src,n) \ __asm__("cld;rep;movsl& ...
- ubuntu14.04+MatlabR2014a+caffe
一.下载matlab 1 sudo mkdir /media/matlab 2 sudo mount -o loop [path]MATHWORKS_R2014A.iso /media/matlab ...
- git 提交代码场景
1.首次提交代码到master git init git add . git commit -m '' git remote add origin +address git push -u origi ...
- pyhon基础之约束和异常处理:
约束和异常处理:内容梗概: 1. 类的约束 2. 异常处理 3. 自定义异常 4. 日志 1. 类的约束定义:约束是对类的约束常用方法:1. 提取父类.然后在父类中定义好方法.在这个方法中什么都不用干 ...
- 【其他】【服务器】【4】删除Windows系统中不想要的服务
步骤: 1,开始菜单栏查找“服务”,打开后找到想要删除的服务 2,右键单击想要删除的服务,选择“属性”-“常规”-“服务名称”,记下服务名称(AA) 3,开始菜单栏输入“cmd”打开命令行窗口,输入s ...
- hbase安装部署
hbase的安装 ①cp /mnt/hgfs/xiazai/hbase-1.2.5-bin.tar.gz /data tar -xzvf hbase-1.2.5-bin.tar.gz ②环境 sud ...
- sqlite3 新增数据
cx = sqlite3.connect("c:/数据库名字")#打开数据库cu = cx.cursor()cu.execute("INSERT INTO [user] ...
- Ubuntu 下安装Go语言
https://blog.csdn.net/ceciiiilia/article/details/71483221 (一)从官网安装Go语言 1.对于64位Linux: $ wget https:// ...
- android 数据库添加字符串 添加失败 解决方案
这两天遇到一个棘手的问题,在往sqlite数据库中添加数据时,总是添加失败,但是添加数字却可以.原来是添加时,忘记添加''号修饰. 修改前: 修改后: 这样就完美解决.