transform子元素,绝对定位失效

时间:2021-12-17 14:29:03

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

    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);