Javascript 在移动chrome上调整窗口大小时flexbox中的奇怪行为
flexbox在移动浏览器上发生了一种非常奇怪的行为 这只发生在手机浏览器上,我目前正在谷歌像素手机上使用Chrome mobile。我有一个正在运行的调整大小脚本,它可以调整页面上的多个元素的大小,作为无法正确利用100vh的一种解决方法,如下所示:Javascript 在移动chrome上调整窗口大小时flexbox中的奇怪行为,javascript,css,mobile,flexbox,vue.js,Javascript,Css,Mobile,Flexbox,Vue.js,flexbox在移动浏览器上发生了一种非常奇怪的行为 这只发生在手机浏览器上,我目前正在谷歌像素手机上使用Chrome mobile。我有一个正在运行的调整大小脚本,它可以调整页面上的多个元素的大小,作为无法正确利用100vh的一种解决方法,如下所示: window.onresize = function() { document.getElementById("backgroundImage").style.height = window.innerHeight;
window.onresize = function() {
document.getElementById("backgroundImage").style.height = window.innerHeight;
document.getElementById("mainScreen").style.height = window.innerHeight;
if (window.innerWidth > 750) {
document.getElementById("scrollContent").style.height = window.innerHeight - "96";
} else {
document.getElementById("scrollContent").style.height = window.innerHeight - "72";
}
};
gif中显示的正在生效的项目是flex容器中的项目。当我向上滚动隐藏导航栏,然后单击其中一个flex链接时,就会发生这种行为
我正在使用Vuejs,下面的内容是通过检查道具更改来填充的。柔性链接将字符串传递到函数中,该函数将项目视图更改为选定项目
我还有一个脚本,可以添加一个类来更改选定链接上的背景颜色,并删除所有其他链接上的该类,这就是我更改活动链接背景的方式
var webComp = Vue.component('design-comp', {
template: "#webComp",
props:['trans-state'],
components: {
'project-comp': projectComp,
},
data: function() {
return {
activeProj: 'default',
}
},
methods: {
changeProj: function(proj) {
this.activeProj = proj;
var a = document.getElementsByClassName('projClick');
for (i=0; i<a.length; i++) {
a[i].classList.remove('projActive');
}
event.currentTarget.classList.add('projActive');
document.getElementById('webContainer').scrollTop = 0;
}
},
created: function() {
this.activeProj = "default";
}
});
以下是相关的HTML:
<div class="viewContainer" id="webContainer">
<div class="transitionBox"></div>
<div class="stickyImageBottomLeft"><img src="./img/AfricaMountainPixelR.gif" /></div>
<div class="stickyImageBottomRight"><img src="./img/AfricaMountainPixel.gif" /></div>
<div class="projHeader">
<div class="projClick projActive" v-on:click="changeProj('default')">
<p>0</p>
</div>
<div class="projClick" v-on:click="changeProj('kyount')">
<p>1</p>
</div>
<div class="projClick" v-on:click="changeProj('prodigal')">
<p>2</p>
</div>
<div class="projClick" v-on:click="changeProj('joy')">
<p>3</p>
</div>
<div class="projClick" v-on:click="changeProj('cgl')">
<p>4</p>
</div>
<div class="projClick" v-on:click="changeProj('mikeg')">
<p>5</p>
</div>
<div class="projClick" v-on:click="changeProj('reddit')">
<p>6</p>
</div>
<div class="projClick" v-on:click="changeProj('westbeach')">
<p>7</p>
</div>
</div>
<div class="contentContainer">
Project Page is loaded here
</div>
</div>
0
一,
二,
三,
四,
五,
六,
七,
项目页面在此加载
我希望有人知道发生了什么,因为我真的不知道发生这种事情的原因。试试这个:
#webContainer {
margin: 0;
padding-top: 50px;
height: 100%;
box-sizing: border-box; /* if you didn't apply it before */
...
在Kosh Very的帮助下,我找到了一个完美的解决方案,同时仍然保持了元素的预期风格
#webContainer {
margin-top: 50px;
box-sizing: border-box;
position: relative;
height: 100%;
.projHeader {
...
position: fixed;
...
}
}
我仍然觉得最初的问题是某种bug,但这至少是一种解决方法。看起来您不明白
.style.height=var
是如何工作的var
应该是有效的css值字符串,否则它不会生效。高度的有效css字符串是number+units
(例如10px
或1%
或99em
等)窗口。innerHeight
返回不带单位的数值。因此,您的onresize
函数什么也不做。正确的方法是e。g<代码>document.getElementById(“scrollContent”).style.height=window.innerHeight-96+'px'@KoshVery尽管出现了错误,javascript的这一部分仍能正常工作,但我还是对其进行了更改。然而,改变它并不能解决主要问题。这不是一个解决办法。这是一个评论J。你能在问题中添加你的HTML吗?@KoshVery好的,我添加了HTML的相关部分。谢谢,这从技术上解决了我的问题。然而,我现在还记得为什么我最初使用边距顶部而不是填充顶部:加载在projHeader下面的内容浮在它上面。更改z索引可以正常工作,但随后滚动条被切断。我将寻找解决方案,但再次感谢您帮助查明问题。很高兴提供帮助!看起来你的代码太复杂了,但我相信你很快就会解决的。祝你好运
#webContainer {
margin-top: 50px;
box-sizing: border-box;
position: relative;
height: 100%;
.projHeader {
...
position: fixed;
...
}
}