在JS中将vh单位转换为px
Convert vh units to px in JS
不幸的是,100vh
并不总是与100%
浏览器高度相同,如下例所示。
html,
body {
height: 100%;
}
body {
overflow: scroll;
}
.vh {
background-color: blue;
float: left;
height: 50vh;
width: 100px;
}
.pc {
background-color: green;
float: left;
height: 50%;
width: 100px;
}
<div class="vh"></div>
<div class="pc"></div>
这个问题在iPhone 6+上更为明显,因为上位置栏和下导航栏如何在滚动时展开和收缩,但不包括在100vh
的计算中。
使用JS中的window.innerHeight
可以获取100%
高度的实际值。
有没有一种方便的方法来计算JS中100vh
到像素的当前转换
我试图避免仅仅为了计算100vh
而生成具有内联样式的伪元素。
出于这个问题的目的,假设max-width
或max-height
可能产生不正确的值,并且页面上任何位置都没有100vh
的现有元素。基本上,假设任何可能出错的都有,但本机浏览器功能除外,它们保证是干净的。
到目前为止,我想到的最好的是:
function vh() {
var div,
h;
div = document.createElement('div');
div.style.height = '100vh';
div.style.maxHeight = 'none';
div.style.boxSizing = 'content-box';
document.body.appendChild(div);
h = div.clientHeight;
document.body.removeChild(div);
return h;
}
但是对于计算100vh
的当前值来说,它似乎太冗长了,我不确定它是否还有其他问题。
怎么样:
function viewportToPixels(value) {
var parts = value.match(/([0-9'.]+)(vh|vw)/)
var q = Number(parts[1])
var side = window[['innerHeight', 'innerWidth'][['vh', 'vw'].indexOf(parts[2])]]
return side * (q/100)
}
用法:
viewportToPixels('100vh') // window.innerHeight
viewportToPixels('50vw') // window.innerWidth / 2
区别来自滚动条滚动条。
您需要将滚动条的高度添加到window.innerHeight
中。根据另一个问题,似乎没有一种超级可靠的方法来做到这一点:
使用JavaScript 获取滚动条宽度
相关文章:
- 如何在JavaScript中将字符串转换为函数引用
- 如何在Javascript中将JSon对象转换为数组
- 使用JS将数组转换为json对象
- 如何使用json将对象列表从java转换为javascript
- 偶尔结结巴巴地说“;堆叠的”;translate()上的转换(v4.0.0-alpha40)
- 为什么在单独的函数中应用时转换会闪烁/断断续续(D3)
- 在Javascript中转换对象数组
- 将数字转换为一定数量的硬币
- 将纯文本URL转换为可单击链接
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 如何使用js将SNAPSHOT内部版本号转换为3位数的整数
- 如何将TypeScript对象转换为普通对象
- 检测个位数整数时正在转换毫秒
- 从javascript到jquery的转换
- 将非像素 css 值转换为 px
- 在JS中将vh单位转换为px
- 如何将自动高度转换为px
- 用整数或小数值将px转换为mm
- 使用JS将html/css中的px值转换为%的代码
- 将css计算函数转换为px值