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 ...
随机推荐
- hadoop 企业应用案例--大众点评
hadoop 企业应用案例--大众点评 http://f.dataguru.cn/thread-260531-1-1.html
- 01Flask基础
简介 Flask诞生于2010年,是Armin ronacher(人名)用 Python 语言基于 Werkzeug 工具箱编写的轻量级Web开发框架. Flask 本身相当于一个内核,其他几乎所有的 ...
- 将maven项目托管到github
1.下载安装git 并通过 git config --global user.name "",和git config --global user.email "" ...
- Mac系统安装和配置tomcat步骤详解
一:下载 打开Apache Tomcat官网,选择需要的版本下载: 二:存放到本地 文件夹重名民为ApacheTomcat,放到/Users/计算机名/Library/目录下 三:启动Tomcat 打 ...
- MYSQL--服务器的安装
MYSQL--服务器的安装 学java已经好久了,但是还是没有学会安装数据库,这次重装系统后自己学了学,昨天晚上刚刚装好,卸载了,再装一次,就想着把它笔记下来.要不又忘了.. 1.删除你的服务.在cm ...
- 利用ML&AI判定未知恶意程序——里面提到ssl恶意加密流检测使用N个payload CNN + 字节分布包长等特征综合判定
利用ML&AI判定未知恶意程序 导语:0x01.前言 在上一篇ML&AI如何在云态势感知产品中落地中介绍了,为什么我们要预测未知恶意程序,传统的安全产品已经无法满足现有的安全态势.那么 ...
- 检测用户命令序列异常——使用LSTM分类算法【使用朴素贝叶斯,类似垃圾邮件分类的做法也可以,将命令序列看成是垃圾邮件】
通过 搜集 Linux 服务器 的 bash 操作 日志, 通过 训练 识别 出 特定 用户 的 操作 习惯, 然后 进一步 识别 出 异常 操作 行为. 使用 SEA 数据 集 涵盖 70 多个 U ...
- Nop 4.1版本已经迁移到.net core2.1版本
1. github 下载,4.1版本,运行, install时,会让你新增后台账户密码,sql服务器 2. 在Configuration 新增Language 3. 上传中文语言包 , 你也可以先导出 ...
- CSS3 的box-shadow进阶之 - 基础知识篇
box-shadow被认为是CSS3最好的特性之一,发挥想象力,搭配其它属性,可以做出很多好看的效果(如下图,将会放在下一篇文章讲解),这篇文章主要讲一下box-shadow的基础知识. ...
- application Initialization设置导致处理程序ExtensionlessUrlHandler-Integrated-4.0在其模块列表中有一个错误模块问题的解决
HTTP 错误 500.21 - Internal Server Error 处理程序“ExtensionlessUrlHandler-Integrated-4.0”在其模块列表中有一个错误模块“Ma ...