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 ...
随机推荐
- SPL之AccessArray
<?php /** * Class MyArrayAccess * 提供像访问数组一样访问对象的能力的接口 */ class MyArrayAccess implements ArrayAcce ...
- centos 7 源代码安装mysql5.6
###### mysql ######### 引言:这里选用mysql5.6版本,5.7版本编译时间需要几个小时. 编译安装环境: yum -y install make gcc-c++ cmake ...
- Highcharts 配置语法
Highcharts 配置语法 本章节我们将为大家介绍使用 Highcharts 生成图表的一些配置. 第一步:创建 HTML 页面 创建一个 HTML 页面,引入 jQuery 和 Highchar ...
- Oracle Shared Pool之Library Cache
1. Shared Pool组成 Shared Pool由许多区间(Extent)组成,这些区间又由多个连续的内存块(Chunk)组成,这些内存块大小不一.从逻辑功能角度,Shared pool主要包 ...
- :after 写三角形 border
.tooltip:after { content: ''; position: absolute; border: 6px solid #5190ac; border-color: #5190ac t ...
- 默认五笔输入法qq
默认五笔输入法 1● 五笔设置 2● 语言设置 Success
- zabbix3.4.7配置邮件告警详细步骤
Zabbix服务器操作 1. 安装sendmail或postfix (邮件传送代理MTA),本教程使用sendmail软件. (标注:如果直接使用外部邮箱发送邮件可以不需要配置sendmail或po ...
- Win10系列:VC++绘制几何图形4
三角形绘制完成以后,接下来介绍如何给项目添加主入口函数.打开D2DBasicAnimation.h头文件,添加如下的代码定义一个DirectXAppSource类. //定义类DirectXAppSo ...
- 用linq和datatable巧妙应用于微软报表rdlc
看看代码吧.现在我用Linq已经上瘾,对SQL语言已经几乎不用了,可惜的是rdlc不支持linq,要采用sql语言生成datatable,用datatable绑定rdlc,这里,应用了一个技巧,解决了 ...
- UVa 11825 - Hackers' Crackdown DP, 枚举子集substa = (substa - 1)&sta 难度: 2
题目 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&a ...