下面的代码：
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
margin: 0;
height: 100%;
}
.flX {
display: flex;
height: 100%;
}
#wrap {flex-direction: column}
#main {flex-grow: 0}
#preview {
display: flex;
flex-grow: 1;
height: 100%;
width: calc(100% - 256px);
background-color: gainsboro;
}
#properties {
width: 256px;
background-color: linen;
}
#propDrag {
width: 8px;
height: 16px;
background-color: silver;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrap" class="flX">
<div id="main" class="flX">
<div id="preview"></div>
<div id="properties" class="flX">
<div id="propDrag"></div>
</div>
</div>
</div>
<script>
const qSlc = function(e) {return document.querySelector(e)},
main = qSlc("#main"),
properties = qSlc("#properties"),
propDrag = qSlc("#propDrag");
let dragProp = false;
function onMouseMove(e) {
let w=window.innerWidth,
x=e.clientX,
pw=w-x;
if (dragProp) {
properties.style.width = pw + 'px'
console.log(w,x,pw,properties.style.width)
}
}
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', () => dragProp = false);
propDrag.addEventListener('mousedown', () => dragProp = true);
</script>
</body>
</html>我注意到当我移动propDrag的时候，指针和元素之间有一个差异，并且随着我向左移动而增加，我还注意到chrome〉inspector〉elements中的properties.width和它的viewport之间有一个差异（当我将鼠标悬停在chrome〉inspector〉elements〉properties上时）。我用屏幕标尺测量了一下，视口中属性矩形下方显示的宽度是正确的。为什么会出现这种差异，如何解决？
1条答案
按热度按时间qqrboqgw1#
我找到了原因：）所以我在#preview的css中添加了“flex：1”，并删除了：flex-grow & width.我还是不明白为什么。