h5页面滚动如何让safari浏览器地址栏消失

已于 2023-07-04 18:42:23 修改
阅读量1.3k 收藏
点赞数
文章标签： safari 前端
于 2023-07-04 18:42:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52259399/article/details/131540805
版权

背景:针对于在safari浏览器打开的h5页面,若页面是可滚动装填,safari浏览器底部会有默认地址栏,导致滑动起来很难受,想要在滑动页面时,底部导航栏消失可以用一下办法.
 

做法:
         之前将overflow-y:scroll设置在页面最外层的一个dom上,dom设置一定的高度,这样页面虽然可以滚动,但是safari浏览器底部地址栏一直存在.

           只需要更改最外层高度为fit-content就可以了,safari浏览器页面会自动监听滚动隐藏底部地址栏

干饭小羊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过JS自动隐藏手机浏览器的地址栏
web开发自学
12-20 1907
大家通过手机自带浏览器打开百度、淘宝，在首页加载完毕后，会自动隐藏页面上方的地址栏，加之这些网站针对手机浏览器做了优化，乍看之下，还真难区分这是WEB APP还是Native App，如下左侧图片为通过safari打开淘宝网的首页，要不是因为底下的浏览器工具栏，还真像Native App。实际上它是有地址的，向下拖动就会看到地址栏，如下右侧图片。 如何才能实现将浏览器地址栏隐藏呢？百度...
html隐藏safari地址栏,怎么隐藏 iOS Safari 打开网页时的地址栏和工具栏探索
weixin_34847426的博客
06-04 5196
先来看一张截图红色框处就是用手机浏览器打开页面时，自动显示出来的头部地址栏和底部工具栏如果现在有一个需求，用手机浏览器打开页面时，把地址栏和工具栏隐藏，该怎么办呢？起初我在度娘找到了好几篇博客都推荐如下方法注：但使用该方法没有效果(可能该属性只针对iOS 7.1 的 Safari 有用)几经波折，我发现并没有直接能够隐藏掉地址栏和工具栏的方法，但有一个折中的方法。手机浏览器打开页面时，地址栏和工...
移动端WebApp隐藏地址栏的方法
09-03
主要介绍了移动端WebApp隐藏地址栏的方法,本文分别给出了4种方法,适应不同情况下使用,小编推荐最后一个方法,需要的朋友可以参考下
移动端 滚动隐藏浏览器地址栏和工具栏
baidu_33164415的博客
03-21 236
移动端 滚动隐藏浏览器地址栏和工具栏
Safari浏览器中工具栏的高度问题
Terenceno的博客
07-10 9395
苹果浏览器工具栏是否占html页面高度有以下情况 第一种： 使用高度100vh时：100vh=当前视口可见高度 这种情况下工具栏的高度是不包含在100vh里面的，所以设置高度为100vh在苹果浏览器中打开会出现滚动条的问题或者页面被工具栏遮挡，这种是我在移动端开发中比较常用的方式，快捷简单。 第二种： 直接设置html,body,div 一级一级的设置高度为：100% 在苹...
android WebView加载H5去地址栏的两种方式
09-27
android WebView加载H5去地址栏的两种方式，一种需要在JS中修改，第二种直接去掉地址样栏，两个方式都可使用
微信支付如何实现内置浏览器的H5页面支付
11-26
因为项目需要，要在H5页面中加入微信支付，所以便去尝试，只想说真的很坑，尤其调试起来不方便 这是微信的官方API文档 微信API 微信支付的准备工作 申请公众号，申请开通支付，这个很简单，自行百度 申请好之后 在微信公众平台页面的“微信支付”页面中的“开发配置”Tab上配置“支付授权目录”，“测试授权目录”，“测试白名单” 在微信公众平台页面的“开发者中心”中找到“AppID(应用ID)”和“AppSecret(应用密钥)” 在商户平台中找到微信支付分配的商户号，以及自己配置一个商户支付密钥 具体步骤 首先通过微信支付的api 获得支付用的prepay_id，这里需要用到上面提到的“Ap
苹果浏览器微信底部返回栏显示/隐藏的问题
ZH
11-22 6953
此段js代码完美解决 ; (function () { try { isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) if (fn.isIOS) { // window.history.pushState({}, "title", "#"); ...
html隐藏safari地址栏,如何隐藏常见的访问站点和Safari中的热门站点 | MOS86
weixin_39695374的博客
06-04 1465
Safari浏览器喜欢显示您经常访问的网站，当您打开它。在iPhone或iPad上显示这个功能是可定制的。您在iOS上，您可以完全禁用它。在Mac上，您可以调整它，以防止您的个人信息出现。禁用iPhone或iPad上经常访问的站点iOS 9的As，它只有您喜爱的图标才会显示在Safari上要做到这一点，打开设置应用程序，选择而是在启用该功能的同时删除一个或多个经常访问的网站，打开Safari长按一...
html隐藏浏览器菜单栏,移动设备(手机)上浏览器全屏隐藏工具栏和菜单栏的设置...
weixin_39796839的博客
06-03 2600
让手机上易于浏览阅读，meta viewport 必不可少。作为一款 webApp，你可能更希望默认为全屏模式。通过 meta 配置，在某些浏览器版本上可以实现这种效果。以下内容仅供参考。meta viewport 写法与相关参数meta viewport 写法与相关参数如下。width viewport 宽度(数值<200-10000>/device-width)height vi...
当fixed遇到ios浏览器，页面进行滑动时，导致浏览器的地址栏消失，页面变长，没有遮住下面的内容
技术前端，忠于热爱 @回忆哆啦没有A梦
02-09 1016
在真机下，当fixed遇到ios Saifa浏览器，页面进行下拉滑动时，会导致浏览器的底部的地址栏消失，页面变长，没有遮住下面的内容，导致下面层级的页面露出来。
firefox 滚动条消失引起页面抖动的问题
09-25
[code]html {height: 100%; margin-bottom: 1px; }[/code]用上面的代码即可。
javascript实现阻止iOS APP中的链接打开Safari浏览器
10-25
主要介绍了javascript实现阻止iOS APP中的链接打开Safari浏览器,这个IOS APP一般是Web APP,否则没法使用本文的代码,需要的朋友可以参考下
h5页面置灰处理源代码，兼容IE（优雅降级提供下载浏览器链接）
01-08
h5页面置灰处理源代码 兼容IE（优雅降级提供下载浏览器链接） 马上要到清明节了，有朋友找我要给页面置灰的方案和方法，在网上搜的方法基本都是在Chrome上直接置灰，在ie上就有点难处理了；我找了下之前在南京遇到...
Dubbo应用可观测性升级指南与踩坑记录
三人三木的专栏
04-17 1214
应用从dubbo-3.1.*升级到dubbo-*:3.2.*最新稳定版本，提升应用的可观测性和度量数据准确性。 1. dubbo版本发布说明 2. 应用修改点 3. 踩过的坑
判断前端入参是否空否则提示前端写法
最新发布
qq_39306234的博客
04-28 218
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 503
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
2024 XYCTF Web 方向 wp 全解
qq_39947980的博客
04-27 965
XYCTF 2024 Web 方向全解
两个前端标签
ma_no_lo的博客
04-24 166
两个前端标签
js 使h5页面滚动到底部
06-02
您可以使用以下代码将H5页面滚动到底部： ```javascript window.scrollTo(0, document.body.scrollHeight); ``` 这将使页面滚动到文档的底部。如果您只想滚动到某个元素的底部，可以将 `document.body.scrollHeight` 替换为该元素的底部偏移量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值