android - Android 版 Chrome 在滚动时隐藏地址栏，在页脚下方展开背景图片-6ren

android - Android 版 Chrome 在滚动时隐藏地址栏，在页脚下方展开背景图片

转载作者：行者123 更新时间：2023-12-04 15:30:51

我创建了一个页脚 #bottom_footer，它在滚动时粘在网页底部。它设置为距边距顶部 100%。它适用于桌面 View 的所有浏览器以及 ios 上的 chrome。但是，在 chrome for android 上，我遇到了一个问题，即正文的背景图像扩展到页脚下方。当用户向下滚动导致地址栏隐藏但网页本身没有溢出 y 轴(全屏显示)时，就会发生这种情况。我不想阻止地址栏隐藏，我想阻止背景在浏览器全屏模式下扩展到页脚之外。我正在用 flask 应用程序开发这个网站。

此代码 fragment 需要 Bootstrap 4.5，但我无法运行脚本和样式表。如果任何人都可以将它添加到谁知道如何将它添加到代码 fragment 中，那将不胜感激。

body {
  background-position: center center;
  background-size: auto;
  position: absolute;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  color: white;
}

a {
  color: white;
}

a:hover {
  text-decoration: none;
  color: white;
}

#content-wrapper {
  overflow-y: scroll;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

#content-wrapper::-webkit-scrollbar {
  display: none;
}

#top_navbar {
  padding: 0;
}

.navbar-brand {
  padding: 0;
}

#navbar_logo {
  width: 15vw;
  margin-right: 6vw;
  margin-left: 0 !important;
}

.nav-link {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2vw;
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #1b1b1b;
  letter-spacing: 1px;
}

.nav-link:hover {
  -webkit-text-fill-color: #1b1b1b;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
}

.nav-item {
  margin-left: 3vw;
  margin-right: 3vw;
}

#bottom_footer,
#legal_documents {
  background-color: #1b1b1b;
  width: 100%;
  position: absolute;
  display: table;
  bottom: 0;
  text-align: center;
  padding-top: 1%;
  padding-bottom: .4%;
}

#legal_documents {
  bottom: unset;
  font-size: 10px;
  padding-bottom: .6% !important;
}

#social_buttons::selection {
  color: none;
  background: none;
}

#social_buttons::-moz-selection {
  color: none;
  background: none;
}

#social_buttons a {
  display: inline-block;
  margin: 0 15px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

#bottom_footer a:hover,
#legal_documents a:hover {
  opacity: 0.5;
}

<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
  <nav id="top_navbar" class="navbar navbar-expand-sm navbar-dark">
    <a class="navbar-brand" href="" title="">
      <img id="navbar_logo" src="">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_items" aria-controls="navbar_items" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

    <div class="collapse navbar-collapse" id="navbar_items">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
      </ul>
    </div>
  </nav>

  <main id="content-wrapper" class="container-fluid">
  </main>

  <div id="bottom_footer">
    <div id="social_buttons">
      <a href="" class="facebook" title="Facebook" target="_blank"></a>
      <a href="" class="twitter" title="Twitter" target="_blank"></a>
      <a href="" class="instagram" title="Instagram" target="_blank"></a>
      <a href="" class="snapchat" title="Snapchat" target="_blank"></a>
      <a href="" class="youtube" title="YouTube" target="_blank"></a>
    </div>
    <div id="legal_documents">
      <a href="" title="Privacy Policy" target="_blank">PRIVACY POLICY</a> |
      <a href="" title="Terms and Conditions" target="_blank">TERMS AND CONDITIONS</a>
    </div>
  </div>
</body>

</html>

最佳答案

已更新

您问题的直接答案 - 有一个技巧可以根据浏览器面板的显示和折叠来更正 100vh 设备高度。取自 here .

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

html {
  height: 100%;
}

body {
  background-position: center center;
  background-size: auto;
  position: absolute;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  font-family: 'Montserrat', sans-serif;
  color: white;
}

a {
  color: white;
}

a:hover {
  text-decoration: none;
  color: white;
}

#content-wrapper {
  overflow-y: scroll;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

#content-wrapper::-webkit-scrollbar {
  display: none;
}

#top_navbar {
  padding: 0;
}

.navbar-brand {
  padding: 0;
}

#navbar_logo {
  width: 15vw;
  margin-right: 6vw;
  margin-left: 0 !important;
}

.nav-link {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2vw;
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #1b1b1b;
  letter-spacing: 1px;
}

.nav-link:hover {
  -webkit-text-fill-color: #1b1b1b;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
}

.nav-item {
  margin-left: 3vw;
  margin-right: 3vw;
}

#bottom_footer,
#legal_documents {
  background-color: #1b1b1b;
  width: 100%;
  position: absolute;
  display: table;
  bottom: 0;
  text-align: center;
  padding-top: 1%;
  padding-bottom: .4%;
}

#legal_documents {
  bottom: unset;
  font-size: 10px;
  padding-bottom: .6% !important;
}

#social_buttons::selection {
  color: none;
  background: none;
}

#social_buttons::-moz-selection {
  color: none;
  background: none;
}

#social_buttons a {
  display: inline-block;
  margin: 0 15px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

#bottom_footer a:hover,
#legal_documents a:hover {
  opacity: 0.5;
}

<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>

<body>
  <nav id="top_navbar" class="navbar navbar-expand-sm navbar-dark">
    <a class="navbar-brand" href="" title="">
      <img id="navbar_logo" src="">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_items" aria-controls="navbar_items" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

    <div class="collapse navbar-collapse" id="navbar_items">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
      </ul>
    </div>
  </nav>

  <main id="content-wrapper" class="container-fluid">
  </main>

  <div id="bottom_footer">
    <div id="social_buttons">
      <a href="" class="facebook" title="Facebook" target="_blank"></a>
      <a href="" class="twitter" title="Twitter" target="_blank"></a>
      <a href="" class="instagram" title="Instagram" target="_blank"></a>
      <a href="" class="snapchat" title="Snapchat" target="_blank"></a>
      <a href="" class="youtube" title="YouTube" target="_blank"></a>
    </div>
    <div id="legal_documents">
      <a href="" title="Privacy Policy" target="_blank">PRIVACY POLICY</a> |
      <a href="" title="Terms and Conditions" target="_blank">TERMS AND CONDITIONS</a>
    </div>
  </div>

</body>

</html>

附言但我认为您的模板中存在几个核心错误。这不是一个严格的规定，仅在我看来。

使用 position: absolute; 作为正文。可以替换为relative。
用于 body height: 100%;。为了获得更好的体验，请使用 min-height: 100%;
这部分 #bottom_footer, #legal_documents 是非常错误的，因为它为父子设置了相同的行为，即 position: absolute; 和 bottom: 0;.
您希望 #top_navbar 和 #bottom_footerto 具有粘性和滚动到法律文件是相互排斥的。

我会再写一个版本，根据我的设想重写，但你总是可以使用第一个。

setDimensions();

window.addEventListener('resize', () => {
  setDimensions();
});

function setDimensions() {
  // this part is for prevent overlapping content by 'fixed' nav and footer, by adding 2 blocks with the same height, but with unset position 
  let topHeight = $('#top_navbar').outerHeight();
  let footerHeight = $('#bottom_footer').outerHeight();
  $('#pre_top_navbar').css('height', (topHeight) + 'px');
  $('#pre_bottom_footer').css('height', (footerHeight) + 'px');

  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

html {
  height: 100%;
}

body {
  background-position: center center;
  background-size: auto;
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  font-family: 'Montserrat', sans-serif;
  color: #333;
}

a {
  color: white;
}

a:hover {
  text-decoration: none;
  color: white;
}

#content-wrapper {
  overflow-y: scroll;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

#content-wrapper::-webkit-scrollbar {
  display: none;
}

#top_navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  padding: 0;
  background: #fff;
}

.navbar-brand {
  padding: 0;
}

#navbar_logo {
  width: 15vw;
  margin-right: 6vw;
  margin-left: 0 !important;
}

.nav-link {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2vw;
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #1b1b1b;
  letter-spacing: 1px;
}

.nav-link:hover {
  -webkit-text-fill-color: #1b1b1b;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
}

.nav-item {
  margin-left: 3vw;
  margin-right: 3vw;
}

#bottom_footer {
  background-color: #1b1b1b;
  width: 100%;
  position: fixed;
  display: table;
  bottom: 0;
  text-align: center;
  padding-top: 1%;
  padding-bottom: .4%;
  z-index: 2;
}

#legal_documents {
  bottom: unset;
  font-size: 10px;
  padding-bottom: .6% !important;
}

#social_buttons::selection {
  color: none;
  background: none;
}

#social_buttons::-moz-selection {
  color: none;
  background: none;
}

#social_buttons a {
  display: inline-block;
  margin: 0 15px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

#bottom_footer a:hover,
#legal_documents a:hover {
  opacity: 0.5;
}

<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div id="pre_top_navbar"></div>
  <nav id="top_navbar" class="navbar navbar-expand-sm navbar-dark">
    <a class="navbar-brand" href="" title="">
      <img id="navbar_logo" src="">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_items" aria-controls="navbar_items" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

    <div class="collapse navbar-collapse" id="navbar_items">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
      </ul>
    </div>
  </nav>

  <main id="content-wrapper" class="container-fluid">
    first<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>last
  </main>

  <div id="pre_bottom_footer"></div>
  <div id="bottom_footer">
    <div id="social_buttons">
      <a href="" class="facebook" title="Facebook" target="_blank"></a>
      <a href="" class="twitter" title="Twitter" target="_blank"></a>
      <a href="" class="instagram" title="Instagram" target="_blank"></a>
      <a href="" class="snapchat" title="Snapchat" target="_blank"></a>
      <a href="" class="youtube" title="YouTube" target="_blank"></a>
    </div>
    <div id="legal_documents">
      <a href="" title="Privacy Policy" target="_blank">PRIVACY POLICY</a> |
      <a href="" title="Terms and Conditions" target="_blank">TERMS AND CONDITIONS</a>
    </div>
  </div>
</body>

</html>

关于android - Android 版 Chrome 在滚动时隐藏地址栏，在页脚下方展开背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61264725/

文章推荐： git - 关于 git 中常规提交消息的问题

文章推荐： java - 如何使用 Synopsys detect 扫描 Java Maven 项目

文章推荐： asp.net-mvc - Asp.Net 3.1 使用 Windows 身份验证和角色授权

wpf - 展开/折叠WPF扩展器
如何在代码中展开/折叠WPF扩展器？我需要这样做才能在其中初始化控件。最佳答案使用IsExpanded属性，将其设置为true以使内容可见: myExpander.IsExpanded = tru
powershell - ArrayList 展开
Powershell 展开让我发疯。我有以下代码可以从交换收件人处检索电子邮件地址。我使用 ArrayList 是因为当您希望能够从数组中删除项目时，很多人都建议使用它。 $aliases = Ne
jsf - 展开/折叠数据表中的子表
是否可以展开/折叠数据表中的子表？我的子表包含与其上方行相关的信息，我想显示/隐藏图像的点击。只是想知道我会怎么做？这是我目前使用的:
javascript - 展开/折叠文本区域问题
我正在尝试创建一个可扩展的文本区域，仅当该框为空时，该区域才会折叠回其原始高度。如果它不为空，那么我希望文本区域保持扩展并根据需要增长(即，当用户输入更多文本时增长)。文本区域永远不应该隐藏输入的文本
javascript - 嵌套可排序无法正确折叠/展开
当尝试将 nestedSortable jQuery 插件与其网站上提供的示例一起使用时，该插件无法正常工作。拖放可以工作，但是当我需要折叠/展开时就会出现问题。我使用了另一个问题中建议的解决方案，
javascript - 为什么引导行不折叠/展开？
我有一个显示嵌套数据的表。数据如下所示: Objective 1 Objective 1.1 Objective 1.1.1 Objective 1.2
javascript - 展开/收缩菜单栏
我正在使用 jQuery 从屏幕左侧展开/缩回菜单栏。这是我到目前为止所拥有的: $(document).ready(function(){ $('.menu-button').on("clic
javascript - 按类别向图像添加折叠/展开
如何根据类别向页面上的图像添加隐藏/显示(折叠/展开)功能？我希望具有特定类的图像在加载时折叠，并在 JS 中定义一些任意标记(比方说， Show )，然后在扩展中具有不同的任意标记( Hide )
java - 展开/折叠树后触发事件
我需要在折叠和展开后触发事件调整大小。当我尝试使用 SWT.Collapse 和 SWT.Expand 执行此操作时，树上没有任何更改，因为它在发生之前就已触发。有什么办法吗？最佳答案尝试调用 D
scala - 展开/剥离无形余积对象
我有一个如下所示的域: package object tryme { type ALL = AlarmMessage :+: PassMessage :+: HeyMessage :+: CNil
wpf - 展开/折叠所有扩展器
我有一个扩展器列表，我想用全局切换按钮控制其展开状态(IsExpanded)，该按钮应该在展开/折叠状态之间切换。到目前为止，我得到的解决方案是通过将扩展器的 IsExpanded 状态绑定(bin
python - 展开/折叠后调整小部件的大小
我试图根据 QWidget 是否展开/折叠来自动调整其大小。我尝试了几种发布的方法here和 here . 我没有设法采用这些，以便它按照我想要的方式工作:我希望 QWidget 在展开时调整自身大小
javascript - 展开/折叠对象列表
我正在尝试显示对象模型(机器人)列表，这些模型有一个可以是另一个机器人的字段 Parent。我已经使用 Django 的 MPTT 实现了一个嵌套列表: {% load mptt_tags %}
Javascript - 展开/折叠表格行
鉴于下表/代码，我想添加两项。我不太了解 JavaScript，这段代码是另一个程序员留下的。该代码在所有其他方面都按预期工作。这是两个项目: 表格应该以折叠状态开始。所有节点都应该是崩溃到“祖 p
javascript - 展开/折叠表格行
我想要一张可以展开或折叠的表格。我的要求是当我点击表格行然后隐藏行显示或者当我点击其他表格行然后上一个打开的行隐藏或显示相对隐藏行。我发现一个 jquery jxpand 非常适合我，它显示隐藏的行但
javascript - 展开/折叠将页面带到顶部
如果当您向下滚动页面时元素展开或折叠，页面会突然重置并且焦点会移动到页面顶部。有什么方法可以防止页面移动或使其不那么突然？ $(document).ready(function () {
Android LinearLayout 展开
我正在使用以下代码来扩展特定的线性布局，并且遵循了本教程 http://gmariotti.blogspot.sg/2013/09/expand-and-collapse-animation.html
android - 使可折叠工具栏自动折叠/展开
当垂直偏移超过特定阈值时，如何使android中的可折叠工具栏自动折叠/展开？例如，如果垂直偏移超过 getScrollRange() 的半点，则可折叠工具栏应自动展开，低于该阈值时应折叠。最佳答
CSS - 展开 div
http://t-webdesign.co.uk/new/ 如何在不使用固定高度属性的情况下让灰色 div (#content_right) 扩展到与左侧 div 相同的大小？谢谢最佳答案你可能
javascript - 展开/折叠摘录和内容
设置一个简单的 WordPress 博客，仅包含一个页面，即博客存档。但我遇到了一个问题，我想要切换摘录和内容显示更多/显示更少的功能，以便访问者可以轻松浏览同一页面上的帖子，而无需页面重新加载或被发

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

android - Android 版 Chrome 在滚动时隐藏地址栏，在页脚下方展开背景图片

已更新