我试图解决的问题基本上是Safari iOs和Vh计算的问题。
以下是功能:
function overflowHandler() {
const header = document.querySelector('.header-container').getBoundingClientRect().height;
const regionTop = document.querySelector('.region-top').getBoundingClientRect().height;
const totalHeaderHeight = header + regionTop;
if (window.innerWidth < 1080) {
flyout.style.height = 'calc(100vh - ' + totalHeaderHeight + 'px)';
}
}
但我也需要能够传入height: webkit-fill-available
作为一种样式,以修复iOS上用户无法完全滚动到导航底部的错误。
我已经尝试过使用element.style.cssText
来设置这两个高度属性,但最右边的值就是在浏览器中呈现的值。
我的意思是:
element.style.cssText = 'height: calc(100vh - ' + totalHeaderHeight + 'px); height: -webkit-fill-available;'
将呈现为height: -webkit-fill-available;
我不知道该怎么做,也不知道该如何确保菜单的全高可以在iOS上滚动。
使用element.setAttribute('style', 'height: -webkit-fill-available;')