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 ...
随机推荐
- Centos7 下coreseek的安装
Coreseek介绍: Sphinx默认不支持中文索引及检索,基于Sphinx开发了Coreseek 全文检索服务器,Coreseek应该是现在用的最多的Sphinx中文全文检索,它提供了为Sphin ...
- 1.1 从UNIX到Linux的发展历程
MIT的CTSS:第一个分时操作系统 ◼ Multics系统(Multiplexed Information and Computing System) ⚫ 1965年AT&T,MIT和GE的 ...
- 【洛谷p1164】小A点菜
(……) 小A点菜[传送门] 上标签: (一个神奇的求背包问题方案总数的题) 核心算法: ;i<=n;i++) for(int j=m;j>=a[i];j--) f[j]+=f[j-a[i ...
- Raspbian安装Opencv3
如果旧版本使用apt-get安装 sudo apt-get remove libopencv sudo apt-get remove opencv 如果旧版本使用编译安装 sudo make unin ...
- 漏洞复现——bash远程解析命令执行漏洞
漏洞描述:Bash脚本在解析某些特殊字符串时出现逻辑错误导致可以执行后面的命令,在一些cgi脚本中,数据是通过环境变量来传递的,这样就会形成该漏洞 漏洞原理:bash通过以函数名作为环境变量名,以“( ...
- bzoj3876: [Ahoi2014&Jsoi2014]支线剧情
题意:给一幅图,从1开始,每条边有边权最少走一遍,可以在任意点退出,问最小花费 题解:上下界费用流,每个边都流一遍,然后为了保证流量平衡,新建源点汇点,跑费用流把流量平衡 /************* ...
- 创建springboot的聚合工程(二)
前篇已经成功创建了springboot的聚合工程并成功访问,下面就要开始子工程木块之间的调用: springboot项目的特点,一个工程下面的类必须要放在启动类下面的子目录下面,否则,启动的时候会报错 ...
- Git:非Fast forward下的合并(--no-ff方式的git merge)
创建dev分支,并且修改readme.txt的内容,然后提交 使用git merge --no-ff -m "说明内容" 分支名称合并分支 使用git log --graph -- ...
- Windows Visual Studio中修改PostgreSQL代码后调试报错
解决方法: 在源目录中重新install. D:\postgresql-9.6.0\src\tools\msvc>install E:\pg_install
- 浏览器行为模拟之requests、selenium模块
requests模块 前言: 通常我们利用Python写一些WEB程序.webAPI部署在服务端,让客户端request,我们作为服务器端response数据: 但也可以反主为客利用Python的re ...