移动端浏览器上拉上滑地址栏隐藏，页面底部空白解决方案

最新推荐文章于 2023-12-21 15:09:43 发布
最新推荐文章于 2023-12-21 15:09:43 发布
阅读量2.6k 收藏 2
点赞数 1
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hochinchan/article/details/113758402
版权

解决方案是给容器加上css属性position:fixed

最近在完成一个点击图片显示遮罩，让遮罩占满全屏并禁止页面滚动的功能时，发现禁止滚动后浏览器仍然可以通过上滑和下滑来触发地地址栏的隐藏与显示，导致当上滑触发地址栏隐藏时内容可视区高度变大，页面底部出现一小块与地址栏高度一样的区域没有被遮罩层遮到

HochinChan
关注
专栏目录
移动端WebApp隐藏地址栏的方法
09-03
主要介绍了移动端WebApp隐藏地址栏的方法,本文分别给出了4种方法,适应不同情况下使用,小编推荐最后一个方法,需要的朋友可以参考下
解决在移动端css使用100vh底部被遮盖的问题
最新发布
我的米饭
08-20 432
移动端下，若使用100vh单位，那么高度不会是浏览器可视区域的高度，而是会高于可视区域，所以居底部的元素会被遮盖住：如果是chrome浏览器移动端APP的版本在127以上，则可以直接使用代替 vh 单位。如果127版本以下，那么就需要手动兼容了。
倾力总结40条常见的移动端Web页面问题解决方案
weixin_34109408的博客
05-30 3311
原文链接：http://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=2651493053&idx=1&sn=8409bc267cd73229425a915f27f6a27f&scene=0#wechat_redirect 1.安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很...
当fixed遇到ios浏览器，页面进行滑动时，导致浏览器的地址栏消失，页面变长，没有遮住下面的内容
技术前端，忠于热爱 @回忆哆啦没有A梦
02-09 1200
在真机下，当fixed遇到ios Saifa浏览器，页面进行下拉滑动时，会导致浏览器的底部的地址栏消失，页面变长，没有遮住下面的内容，导致下面层级的页面露出来。
解决网页、H5页面在手机端访问时，底部会有一段莫名其妙的空白，大约有几百像素高的留白
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
04-06 1809
仅需要执行下面这段代码即可解决上图空白区域的留白问题。
解决 iPhone X 屏幕底部空白问题
u014206461的博客
06-30 2804
最近做公众号发现 iPhone X 日了狗了，找了半天问题，最后还是度娘到了，很详细 走你-链接: https://www.jianshu.com/p/e4a7d95b288b
safe area
lx583274568的专栏
02-25 356
<meta name="viewport" content="viewport-fit=cover" /> body { padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px padding-left: constant(safe-area-inset-left); //如果未竖屏时为0 padding-right: constan.
JS实现移动端判断上拉和下滑功能
10-19
总结起来，实现移动端的上拉和下滑判断主要依靠touchstart和touchend事件，以及页面坐标属性pageY。通过监听这些事件和计算坐标差，我们可以精确地知道用户是向上滑动还是向下滑动，从而实现相应的功能，如加载更多...
移动端页面上下滑动时禁止显示底部黑色
03-29
页面布局 <body id="wrapper"> <div id="container"></div> </body> 引用组件 引用组件支持下面两种方式： clone之后直接拷贝引用bin文件夹下面的preventoverscroll.min.js 从npm下载安装 npm install...
html5、移动端、微信公众号、手机网址上拉加载、下拉刷新比较好用且比较完善的插件，完全适用于移动端所有浏览器html页面下拉刷
06-10
html5、移动端、微信公众号、手机网址上拉加载、下拉刷新比较好用且比较完善的插件，完全适用于移动端所有浏览器html页面下拉刷新
移动端web页面input+fixed布局bug总结
热门推荐
ly2983068126的博客
10-21 4万+
最近在做移动端，又涉及到了 fixed（固定位置定位）的问题，在使用fixed的过程中，遇到了一些的问题，并且部分问题无法找到较好的解决方案。下面 是我在网上找到的一些解决方法，仅供参考： 正常界面 图中被红色选中区域为 position:fixed 元素 问题1：footer输入框 focus 状态，footer 被居中，而不是吸附在软键盘上部。
移动web前端开发，隐藏浏览器地址栏(全屏)解决方案
zanazh的专栏
10-29 1万+
核心代码：window.scrollTo(0, 1); 要注意的几个点：这个方法要在内容加载完成后执行，换句话浏览器内容的高度要超过浏览器窗口高度（出现‘滚动条’）才有效。针对高度自适应的窗口（height:100%），得用特殊方式解决。 //强制让内容超过 $('#main').css("height",window.innerHeight+100); window.sc
解决safari浏览器上滑隐藏safari工具栏和地址栏
qq_37942845的博客
02-15 1万+
其实这是一个浏览器自带的功能，只需要把页面结构写的好，条件： a、首先需要把dom结构撑的足够高，超过一个屏幕； b、最外层box，不能用positon:absolute; 也不能overflow:scroll 这样最外层box的高度就不够了，这样就可以实现。      ...
H5 兼容底部地址栏、搜索栏
weixin_43294560的博客
09-20 1406
H5 兼容底部地址栏、搜索栏。
H5 - - - - - 移动端页面底部有白色区域解决办法
Dark_programmer的博客
12-21 1181
H5 - - - - - 移动端页面底部有白色区域解决办法
html5 body高度,【前端】移动端 body 高度为100vh 时，实际高度超过了视窗高度。...
weixin_33350741的博客
06-15 2213
在手机端设置 height:100vh 时，在 Chrome 模拟是正常的实际真机浏览的时候 100vh 的高度会超过窗口的实际高度，并显示滚动条。* {padding: 0;margin: 0;border: 0;outline: 0;box-sizing: border-box;}html {width: 100vw;height: 100vh;border: 5px solid red;ov...
解决H5在移动端overflow:scroll滚动条默认不显示和滚动后消失的问题
JulyNight的博客
05-17 7150
今天在工作中，遇到一个关于overflow滚动的问题，我在使用了overflow:scroll进行滚动时，滚动后滚动条自动消失了，需求是需要保留让它一直都在，下面的代码意思是重新设置滚动条的样式 .wf-detailScroll{ overflow-x: scroll; -webkit-overflow-scrolling: touch; } .wf-detailScroll::-webkit-scrollbar-track-piece { backgr
uni-app安卓端，页面底部有空白或者透明区域
ma_s_c的博客
02-28 2365
uni-app开发机顶盒（安卓主板）app。使用navigateTo进行页面跳转 问题：第一次navigateTo跳转底部是一块透明区域，可直接看到桌面；在此页面内再次使用navigateTo跳转，下一个页面会出现遮挡页面的空白区域。 解决方法：跳转页面时去掉跳转动画，代码如下 uni.navigateTo({ url:"*******", animationType:'none' }) ...
iOS 滑动页面的时候让tabbar下移到消失，nav隐藏
CXLiao的博客
04-20 2812
iOS 滑动页面的时候让tabbar下移到消失，nav隐藏，停止滑动的时候tabbar和nav出现- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { [UIView animateWithDuration:1 animations:^{ self.tabBarController.tabBar.tr
JavaScript 如何阻止移动端浏览器上滑 下滑行为
04-26
要阻止移动端浏览器上的滑动行为，可以使用JavaScript中的preventDefault()方法来阻止默认行为。可以监听touchstart，touchmove和touchend等事件，并在事件中调用preventDefault()方法来禁止滑动。以下是一个简单的...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值