如何让悬停生成的图标滚动后仍保持在图片上方

问题核心是当前按钮位置仅在鼠标悬停时计算一次，滚动页面时图片的视口位置变化但按钮未更新。以下是具体优化方案：

核心思路 #

1. 鼠标悬停图片时，记录当前目标图片元素和创建的下载按钮
2. 监听页面滚动事件，实时重新计算图片的视口位置并更新按钮坐标
3. 使用防抖函数减少滚动事件触发频率，避免性能损耗
4. 鼠标离开图片时，清理滚动监听并移除按钮，避免内存泄漏

优化后的代码示例 #

let currentHoverImg = null;
let downloadBtnElement = null;
let debouncedScrollHandler = null;

// 防抖函数：限制滚动事件触发频率
function debounce(func, delay = 15) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  };
}

// 实时更新按钮位置
function updateDownloadBtnPos() {
  if (!currentHoverImg || !downloadBtnElement) return;
  
  const imgRect = currentHoverImg.getBoundingClientRect();
  // 可选：判断图片是否在视口内，不在则隐藏按钮
  const isImgInViewport = imgRect.top < window.innerHeight && imgRect.bottom > 0;
  
  if (isImgInViewport) {
    downloadBtnElement.style.left = `${imgRect.left + 10}px`;
    downloadBtnElement.style.top = `${imgRect.top + 10}px`;
    downloadBtnElement.style.display = 'block';
  } else {
    downloadBtnElement.style.display = 'none';
  }
}

// 图片悬停进入事件
$('img').on('mouseenter', function() {
  currentHoverImg = this;
  const initialRect = currentHoverImg.getBoundingClientRect();
  
  // 创建下载按钮（改用top属性替代margin-top，fixed定位更准确）
  downloadBtnElement = $(`
    <img id="ext-emp-download" 
         src="${chrome.runtime.getURL("img/down.png")}" 
         style="width:45px !important;height:45px !important;position:fixed;z-index:123456789;border-radius:20px;left:${initialRect.left + 10}px;top:${initialRect.top + 10}px">
  `)[0];
  
  $('body').prepend(downloadBtnElement);
  
  // 绑定防抖后的滚动监听
  debouncedScrollHandler = debounce(updateDownloadBtnPos);
  $(window).on('scroll', debouncedScrollHandler);
});

// 图片悬停离开事件
$('img').on('mouseleave', function() {
  // 清理元素和事件监听
  if (downloadBtnElement) {
    $(downloadBtnElement).remove();
    downloadBtnElement = null;
  }
  currentHoverImg = null;
  if (debouncedScrollHandler) {
    $(window).off('scroll', debouncedScrollHandler);
    debouncedScrollHandler = null;
  }
});

关键优化点说明 #

• 滚动实时更新：通过监听scroll事件，每次滚动时调用getBoundingClientRect()重新获取图片的视口位置，同步更新按钮坐标
• 防抖优化：滚动事件触发频率极高，防抖函数能确保短时间内仅执行一次位置更新，避免页面卡顿
• 定位修正：将原代码的margin-top改为top属性，fixed定位下top直接对应视口顶部距离，避免margin带来的布局冲突
• 内存清理：鼠标离开图片时及时移除滚动监听和按钮元素，防止无用事件残留和DOM冗余

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