Chrome视口与检查器的Div尺寸偏差及拖拽偏移问题求解

偏差产生的原因 #

1. 拖拽逻辑计算错误：直接用window.innerWidth - e.clientX设置properties宽度，未记录拖拽起始时的偏移量。拖拽时properties宽度变化会带动propDrag位置移动，但鼠标位置是相对视口的，每次移动都直接将properties宽度设为视口右侧到鼠标的距离，导致鼠标与propDrag的相对位置逐渐偏移，左拖时偏移会越来越大。
2. Flex布局与固定width冲突：preview元素同时设置flex-grow:1和width: calc(100% - 256px)，在flex容器中，flex-grow会让元素自动占据剩余空间，硬设的width会被flex布局调整，导致Elements面板显示的是手动设置的width值，而实际渲染宽度是flex计算后的结果，两者出现差异。

解决步骤 #

1. 修复拖拽逻辑，记录初始偏移 #

修改JS代码，在鼠标按下时记录当前properties宽度和鼠标初始位置，拖拽时基于初始值计算新宽度，保证鼠标与propDrag位置贴合：

const qSlc = function(e) {return document.querySelector(e)},
    main = qSlc("#main"),
    properties = qSlc("#properties"),
    propDrag = qSlc("#propDrag");
let dragProp = false;
let initialPropWidth, initialMouseX;

propDrag.addEventListener('mousedown', (e) => {
    dragProp = true;
    initialPropWidth = parseInt(getComputedStyle(properties).width);
    initialMouseX = e.clientX;
});

function onMouseMove(e) {
    if (dragProp) {
        const newWidth = initialPropWidth + (initialMouseX - e.clientX);
        // 限制最小宽度，避免元素被拖到消失
        properties.style.width = Math.max(100, newWidth) + 'px';
    }
}

document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', () => dragProp = false);

2. 修正Flex布局，移除冲突的width设置 #

删除preview元素的width: calc(100% - 256px)，仅保留flex-grow:1，让flex布局自动分配剩余空间：

#preview {
    display: flex;
    flex-grow: 1;
    height: 100%;
    background-color: gainsboro;
}

修改完成后，拖拽时鼠标与propDrag位置会完全贴合，Chrome开发者工具中properties的width值也会与实际显示宽度一致。

内容的提问来源于stack exchange，提问作者Mikey Muss