div拖拽后onscroll函数失效，结合getBoundingClientRect无响应的解决方法

这个问题的核心在于你的滚动事件逻辑没有考虑拖拽后的状态——它不管你把div拖到哪，都会强制把它拉回固定的50px位置。咱们可以通过记住拖拽后的视口偏移量来解决这个问题，具体步骤如下：

1. 定义变量保存视口偏移量 #

首先声明一个变量，用来存储div相对于视口顶部的偏移距离，初始值设为你原本想要的50px：

// 初始状态：div固定在视口顶部下方50px
let viewportOffset = 50;

2. 修改滚动事件逻辑 #

把原来硬编码50px的滚动事件，改成用这个变量来计算top值：

window.onscroll = function () {
  const faceExtractor = document.getElementById("faceExtractor");
  // 用当前页面滚动距离 + 保存的视口偏移量，动态设置top
  faceExtractor.style.top = `${window.scrollY + viewportOffset}px`;
};

3. 拖拽结束时更新偏移量 #

这是关键一步：当用户拖拽div结束后，我们需要立刻获取div当前相对于视口的顶部距离，更新viewportOffset的值。根据你使用的拖拽工具，监听拖拽结束的事件（比如原生的dragend、jQuery UI的stop等）：

原生拖拽事件示例：

const faceExtractor = document.getElementById("faceExtractor");
faceExtractor.addEventListener("dragend", function() {
  // 获取元素相对于视口的实时顶部距离
  const rect = this.getBoundingClientRect();
  // 更新偏移量为当前视口位置
  viewportOffset = rect.top;
});

jQuery UI Draggable示例：

$("#faceExtractor").draggable({
  stop: function() {
    const rect = this.getBoundingClientRect();
    viewportOffset = rect.top;
  }
});

原理说明 #

• 初始状态下，div会像你原来的逻辑一样，固定在视口顶部下50px的位置。
• 当用户拖拽div后，我们会把拖拽结束时div的视口位置保存下来，后续滚动页面时，就基于这个新的偏移量来定位div，自然不会再被强制拉回50px的位置。

为什么你的原有修改会失效？ #

你尝试用getBoundingClientRect().top来判断和计算，但这个值是元素相对于视口的实时动态值——页面滚动时，这个值会跟着变化，导致你的gap计算逻辑混乱，最终无法正确设置top值。而我们的方案通过保存固定的偏移量，避免了实时计算的误差，逻辑更清晰可靠。

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