Question

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

的index.html

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

的style.css

.top-section {
  height:60vh;
}

有没有办法在CSS中修复此问题，或者没有其他方法可以使用Javascript。

Answer 1

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

您有两种选择：

选项1）有相对顶部栏。当你滚动时它会隐藏选项2）修复它，但使用监听器（scrollTop（））来决定何时打开/关闭顶部栏。

Answer 2

我为你做了一个例子。如果添加/删除项目，则vh值不会更改。它只会在屏幕上调整大小而不是文件调整大小。请参阅下面的代码段（topsection的高度将显示在该部分内的文本滚动中，并且它不会更改）或jSFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: