触摸设备上的 CSS vh 单元问题答案

【问题标题】：CSS vh unit on touch devices Issue触摸设备上的 CSS vh 单元问题
【发布时间】：2017-04-24 12:24:04
【问题描述】：

有没有办法防止触摸设备上的调整大小行为？我的问题是如果我有一个高度为60vh 的部分。此部分位于页面顶部。当用户开始滚动时，地址栏从窗口中消失，浏览器正在刷新vh 单元（如果我是正确的）。

index.html

<section class="top-section">
 <!-- lots of code here -->
</section>

style.css

.top-section {
  height:60vh;
}

有没有办法在 CSS 中解决这个问题，或者没有其他方法可以使用 Javascript。

【问题讨论】：

标签： javascript android ios css

【解决方案1】：

如果您正在谈论创建顶部栏（带有导航按钮和其他东西），隐藏固定元素的最正确方法是使用 JS。

你有两个选择：

选项 1) 有相对的顶栏。滚动时它会隐藏
选项 2) 已修复，但使用侦听器 (scrollTop()) 来决定何时打开/关闭顶部栏。

【讨论】：

【解决方案2】：

我为你做了一个例子。如果您添加/删除项目，vh 值不会改变。它只会在屏幕调整大小时改变，而不是在文档调整大小时改变。见下面的 sn-p （顶部的高度将作为部分内的文本出现在滚动条上，并且不会改变）或jSFiddle

$(window).on('scroll',function(){
 			if ( $(this).scrollTop() > 0 ) {
				$(".address-bar").hide()
			}else{
				$(".address-bar").show()
			}
	$(".top-section").text($(this).height())

});

.address-bar {
	height:5vh;
	background:blue;
}
.top-section {
	height:60vh;
	background:red;
}
.content-section {
	height:100vh;
	background:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="address-bar">
	
</section>
<section class="top-section">

</section>
<section class="content-section">

</section>

【讨论】：