通过 Android 的 Chrome-URL-Bar-Toggle 避免 CSS-Background-Resize

问题描述 投票：0回答：1

使用 Android 版 Chrome 查看网站时，一旦滚动导致 URL 栏隐藏，视图区域的高度就会发生变化。当使用固定背景图像时，这会导致图像大小的任意调整，最初是在向下滚动时，以及当用户再次向上滚动时，这会再次启用 URL 栏。

这个话题已经在这里讨论过：

还宣布了一个“修复”，建议使用 

vh
而不是 
%
来描述图像的高度：

现在给出一个包含固定背景图像的网站：

<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="content">
      <div style="padding-bottom:2000px; width:100%;">Test</div>
      <div>Test again</div>
    </div>
  </body>
</html>

使用以下CSS：

html, body {
    margin: 0;
    padding: 0;
}

div {
    color:white;
    font-size: 30px;
}

#content {
    background: url(https://images.freeimages.com/images/large-previews/01a/technology-background-1632715.jpg) no-repeat right 15% center fixed;
    background-size: cover;
}

将使用 Android 版 Google Chrome 重新缩放背景图像，如上所述。这是一个小提琴。

解决此问题的方法（请参阅链接的 JS 线程）利用 JavaScript 来确定窗口大小调整后的窗口高度，然后更新图像高度。但是，它不会阻止背景图像调整大小而不将页面的一部分留空。

为了将背景图像保持在适当的位置，有两种方法似乎合适：

  • 防止 URL 栏隐藏
  • 使用初始偏移渲染图像，以便能够补偿图像偏移

防止 URL 栏隐藏

为了保持 URL 栏始终可见，我创建了一个包含可滚动 div 容器的固定 div：

<div id="content">
  <div id="fixed">
    <div id="scroller">
      <div style="padding-bottom:2000px; width:100%;">Test</div>
      <div>Test again</div>
    </div>
  </div>
</div>

CSS：

#fixed {
    height:100vh;
    width:100vw;
    overflow:hidden;
}

#scroller {
    overflow-y: auto;
    height:100vh;
}

这个想法是，由于用户没有滚动网站主体，因此 URL 栏不会消失。尽管这可以在我的模拟器上运行，但它无法在真正的 Galaxy S20 上运行。用户滚动到页面底部（div）后可以隐藏 URL 栏。

使用初始偏移渲染图像，以便能够补偿图像偏移

另一个想法是默认将背景图像绘制得“更深”：

background-size: auto calc(100vh + 100px);

如果图像顶部有“未使用”的空间，则应该可以捕获 

resize
- 或 
touchmove
-事件，将新窗口高度与初始窗口高度进行比较，然后补偿偏移。不幸的是，这只会影响图像的 y 维度，我可能需要对 x 轴执行相同的操作或再次重新缩放图像。然而，当尝试在 JavaScript 中确定当前图像大小时（使用 jQuery，请参阅此线程），我遇到了另一个错误；通过 
$('#background').css('background-size')
检索图像大小仅返回 
auto
并忽略第二部分。

有关此主题的大多数帖子都已存在五年以上。有人可以启发我并告诉我现在有办法解决这个问题吗？

更新：

我能够使用以下技术消除调整大小：

假设纵向模式处于活动状态，我根据缩放的图像高度计算图像宽度并将背景大小设置为像素值：

var initHeight = '';
var initWidth = '';
var imageHeight = 982;
var imageWidth = 1500;
var cssHeight;
var cssWidth;

$(window).on('resize', function () {
  if (initHeight == 0) {
    initHeight = $(window).height();
    initWidth = $(window).width();
    cssHeight = parseInt($('#content').css('background-size').split(" ")[1].slice(0,-2));
    cssWidth = cssHeight / imageHeight * imageWidth;
    $('#background').css('background-size', cssWidth + "px " + cssHeight + "px");
}

现在背景图像不会缩放，但切换 URL 栏时它会垂直移动。

为了摆脱这个问题，我使用上面描述的第二种方法并使用初始偏移量绘制背景图像：

background: url(../images/bg.jpg) no-repeat right 15% top -100px;
background-size: auto calc(100vh + 200px);

一旦发生 

resize
事件，我就会更新背景图像位置：

let newHeight = $(window).height();
let newWidth = $(window).width();
let diff = newHeight - initHeight;
$('#background').css('background-position', "85% " + (startHeightOffset + diff) + "px")

这似乎在我的模拟器中有效。背景图像现在保持在原位。但是，在切换设备时，我注意到这种方法仅适用于底部没有工具栏的设备。模拟 Galaxy S9，顶部有一个 URL 栏，底部有一个工具栏，背景图像移动太多，因为两个工具栏（顶部和底部）占用的空间将添加到顶部图片。为了完成这项工作，我只需要确定顶部 URL 栏的高度，我真的不知道这是否可行。

再次强调，为了解决这个问题，必须解决以下问题之一：

  • 可靠地防止隐藏网址栏
  • 确定底部工具栏的高度

更新2：

我能够像这样防止隐藏网址栏：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: scroll;
}
body {
    -webkit-overflow-scrolling:touch;
}

#content {
    width: 100%;
    height: 100%;
    background: url(https://images.freeimages.com/images/large-previews/01a/technology-background-1632715.jpg) no-repeat right 15% center fixed;
    background-size: cover;
}

#fixed {
    height:100%;
    width:100vw;
    overflow:hidden;
}

#scroller {
    overflow-y: auto;
    height:100vh;
}

背景图像保持在原位，因为 URL 栏永远不会折叠。然而，这并不是理想的解决方案，如果有一种方法可以在不需要防止 URL 栏折叠的情况下完成这项工作，那就太好了。

javascript html jquery css google-chrome
1个回答
0
投票

这可能会为您解决问题；

body {
  overflow-y: scroll;
  overscroll-behavior-y: contain;
}

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.