移动端 滚动隐藏浏览器地址栏和工具栏小白指南_移动端菜鸟教程下载

文章中实现原理其实很简单,强制页面高度超过手机屏幕高度,手动滚动时会隐藏浏览器自带地址栏和工具栏(qq浏览器不会隐藏工具栏).js实现自动隐藏,
window.onload=function(){setTimeout(function() {window.scrollTo(0, 1)}, 0)}
原理:js模拟用户滚动,scrollTo.但是我试了各种手机

移动端 滚动隐藏浏览器地址栏和工具栏小白指南

移动端 滚动隐藏浏览器地址栏和工具栏小白指南_移动端菜鸟教程下载

文章中实现原理其实很简单,强制页面高度超过手机屏幕高度,手动滚动时会隐藏浏览器自带地址栏和工具栏(qq浏览器不会隐藏工具栏).

js实现自动隐藏,

window.onload=function(){setTimeout(function() {window.scrollTo(0, 1)}, 0)}

原理:js模拟用户滚动,scrollTo.
但是我试了各种手机浏览器,页面scrollTop确实变了,都没出来效果,可能我的写法有问题吧。
退一步,只能是实现用户滚动隐藏浏览器上下栏了。

先说meta

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="browsermode" content="application">
<meta name="full-screen" content="yes" />
<meta name="x5-fullscreen" content="true" />
<meta name="x5-page-mode" content="app" />
<meta name="360-fullscreen" content="true" />

除了在uc下可以始终隐藏外,其他浏览器只要路由跳转隐藏就会失败。

js方案


 1.放开页面高度适配,让页面内容少的情况高度也超出屏幕高度。
    问题:手机浏览器自带滚动效果很差,如果页面内容很多的时候,滚动不流畅。
          试过overflow-scrolling: touch;效果很好。
          但是视觉上有头部和底部的定位,滚动之后只能用position:fixed.
          底部定位要做适配,而且fixed有失效问题要解决。
 2.better-scroll/vue-scroll插件封装列表滚动。
    问题:如果整个页面都是列表,会发现用户要滚动页面没有下手的地方。
    解决:监听页面路由事件beforeRouteEnter,先禁止掉scroll插件的滚动。
          让用户可以滚动页面。
          window.onscroll事件中拿到想要的scrollTop后(浏览器已经隐藏地址栏和工具栏),放开scroll插件滚动。

参考:js自动隐藏手机浏览器地址栏

海计划公众号
(0)
上一篇 2020/03/30 16:12
下一篇 2020/03/30 16:12

您可能感兴趣的内容

  • 个人网站如何接入支付功能入门教程支持个人支付的第三方平台整理_网站小白教程

    作为个人开发者,为自己的辛苦开发的项目配上支付功能,才有盈利的盼头!但是目前大部分都需要企业资质,那对应个人而言如何在网站、应用中接入支付功能呢?这里找了一些不需要企业资质的第三方支付平台。 1、PayPal个人,企业都可以接入,作为一款主打跨境支付的产品,主打境外收付款,那么对于做外贸的朋友来说是一个不错的选择。有网站,无网站,B2B商家,个人收款都适用。

    2020/04/03
  • js实现简单的数据监听基础知识_数据入门基础

    主要是用Object.defineProperty实现类似vue的数据绑定。第一步:const data = {name: “tom”,age: 14
    }
    Object.defineProperty(data, “name”, {get(){return “name被读取了”},set(val){console.log(‘我被赋值了‘,val)}
    })
    //

    2020/03/22
  • 前端采用js 实现aes加密、解密功能基础入门_加密小白知识

    通常在api开发中,为了保证数据在一定程度上的安全性,我们需要采用一些加密手段,这篇文章主要介绍下使用ase来进行加密、解密。aes的加密标准用来替代原先的DES,已经被多方分析且广为全世界所使用,AES加密是一种对称加密算法,需要保证客户端和服务端使用的相同秘钥,而且加密的padding和mode 需要两端相对应。rsa算法:rsa的公钥私钥是成对的,用其

    2020/04/05
  • Facebook 发布全新跨平台引擎 Hermes!使用帮助_Hermes基础教程

    Facebook 于前日发布了新的 JavaScript 引擎:Hermes,专注于提高 React Native 应用的性能,并且在市面上那些内存较少、存储速度较慢且计算能力低下的移动设备上都有良好的表现。但是不是为了追赶Flutter?这块作者没有说明。移动应用变得愈加繁重的同时也愈加复杂了。开发者为应用添加新功能时通常会遇到卡顿等性能问题。虽然出现性能

    2020/03/29
  • 程序员的笔记,编程写软件学到的 7 件事教程视频_编程小白帮助

    我正在一点一点的从一个工程师转型为管理者。别弄错了,虽然我在转管理,但我仍然在每天写代码。不过我发现自己在会议和电话中会花越来越多的时间去分析讨论,试着去组织团队,并且为全局部署而不是具体战术而烦恼。当然这不是一件坏事。高层次的决策往往比单个的类和函数的细节更有影响。让一个团队更有效率,比仅仅让自己更有生产力有更高的杠杆作用。但我想我已经从我多年来的编程中吸

    2020/04/06
  • 设计师常用的几个资源网站分享小白攻略_设计小白知识

    如果你是一名设计师,你的电脑上可能存储了很多的设计网站,但是对于一些新手小白来说,刚接触设计的时候应该怎样进行绘制呢?难道要自己去一笔一笔的进行绘制吗?下面给大家分享几个设计网站,一起来看看吧!1.美图秀秀网页版美图秀秀很好用,这个美图秀秀的网页版一样好用!网页的设置比起客户端来说简洁很多,不过基础工具并不没有被阉割,那些备受网友好评的功能,比如批量图片裁剪

    2020/03/26
  • js模拟实现输入框input事件入门指南_输入框小白帮助

    直接修改value值是无法触发对应元素的事件的。通过发送输入框input事件了, 可以触发。这里简单封装了一个方法.window.inputValue = function (dom, st) {var evt = new InputEvent(‘input’, {inputType: ‘insertText’,data: st,dataTransfer:

    2020/03/24
  • parcel快速,零配置的打包工具,据说Parcel比webpack快多倍基础知识教程_Parcel小白知识

    Parcel的特性快速打包:Parcel 使用工作进程启用多核编译,并具有文件系统缓存,即使在重新启动后也可快速重新构建。
    打包所有资源:Parcel 支持JS,CSS,HTML,文件资源等等 – 不需要安装任何插件。
    自动转换:在需要时,代码使用 Babel,PostCSS 和 PostHTML 自动转换 – 即使是 node_modules。
    零配

    2020/04/06
  • 从狭义SDN到广义SDN,网络自动化趋势下的SDN使用帮助_SDN入门百科

    SDN的内涵与外延软件定义网络(Software-Defined Networking)概述SDN的概念主要体现的是技术架构视角,强调的是实现网络设备的软件硬件解耦、网络系统的控制面与转发面解耦,以及整体全面的可编程性。SDN的优势在于它是基于系统全局信息进行网络转发等的策略决策的,实现了网络管控模式从设备层面转向系统层面,提供了网络运维自动化统一的配置和控

    2020/03/26
  • Safari Date() 函数对日期时间字符串(yyyy-MM-dd HH:mm:ss) 提示NaN的问题入门教程_日期小白常识

    今天发现一个奇怪的问题,在iPhone使用 safari 选择定时发布文章到OSC,选择时间后提示不是合法的时间,判断时间的代码如下:var d = new Date(‘2020-01-23 23:15’);if (isNaN(d)) {console.log(‘isNaN’);}else{console.log(‘pass’);}在Chrome下会输出 p

    2020/03/20
  • js中Element.getBoundingClientRect()方法入门基础知识_方法菜鸟教程网

    Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。语法rectObject = object.getBoundingClientRect();值返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合 。DO

    2020/03/29
  • 逐点分析,这样做Web端性能测试入门教程_测试零基础入门

    前言:71%用户希望在手机上打开网页能跟电脑一样快;5秒钟被认为是用户能忍受的最长响应时间,如果响应时间超过5秒,50%的移动用户会放弃;33%失望的用户会使用竞品替代;用户尝试三次出现同样性能问题,50%的人不会再使用该应用。基于此,我们今天就一起来探讨一下Web性能测试测试点。(写的略粗糙,欢迎大家留言吐槽。)1、什么是Web性能测试?注意事项有哪些?性

    2020/03/26
  • 你可能错过的现代 JavaScript 特性使用帮助_特性使用帮助

    尽管我在过去 7 年中几乎每天都在写 JavaScript 代码,但不得不承认,我实际上并不是很注意 ES 语言的发布声明。 async/await 和 Proxies 之类的主要特性是一回事,但是每年都有稳定的小规模、渐进式的改进在不断涌现,因为总有一些东西需要学习。所以在本文中,我收集了一些现代 JavaScript 特性,这些特性在首次发布时并没有带来

    2020/03/23
  • 关于996笑话段子菜鸟知识_996入门基础

    996是互联网行业普遍存在的现象,指的是早上九点上班,晚上九点下班,一个周上六天。996ICU期初是互联网从业者自嘲的一种说法,大意是这样的工作制度下最后的结果就是进ICU病房。下面为大家整理下关于996的笑话段子三人应聘。甲:我211。乙:我985。丙:我996。面试官:就你了! 某公司派代表到京东学习先进管理经验。代表问刘总:“你们是怎么做到一边不把员

    2020/03/30
  • particleground基础指南一款时髦的jquery粒子系统背景插件

    particleground教程视频 官方网址:https://jnicol.github.io/particleground/ GitHub:https://github.com…

    2020/03/06
  • ora攻略教程_一个优雅的 Node.js 终端加载动画效果

    ora攻略教程 GitHub:https://github.com/sindresorhus/ora 简介描述:一个优雅的 Node.js 终端加载动画效果 ora一个优雅的终端微…

    2020/03/06