黑色背景下Flashlight cursor滚动不跟随下移问题求助

问题根源 #

你当前的代码用absolute定位手电筒元素，它的坐标基于整个文档，但clientX/clientY是鼠标在视口中的位置。当页面滚动时，文档内容相对于视口偏移，导致手电筒位置和鼠标实际指向的内容脱节。另外现有代码也没实现真正的“照亮”效果，只是一个黄色圆形在文本下方。

修复方案 #

以下是调整后的代码，解决滚动跟随问题并优化照亮效果：

修正后的CSS

body {
  background-color: black;
  margin: 0;
  padding: 2rem;
}

.content {
  color: #fff; /* 文本设为白色，在黑色背景上可见 */
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

#light {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: fixed; /* 改为fixed，基于视口定位，滚动时自动跟随 */
  transform: translate(var(--light-position-x, 0px), var(--light-position-y, 0px));
  background-color: rgb(231, 221, 122);
  mix-blend-mode: screen; /* 混合模式，实现照亮效果 */
  pointer-events: none; /* 避免遮挡鼠标事件 */
  z-index: 10; /* 放在文本上方 */
}

修正后的JavaScript

const light = document.getElementById('light');

document.documentElement.addEventListener('mousemove', function(event) {
  // 减去150px让鼠标位于手电筒中心（300px宽高的一半）
  const x = event.clientX - 150;
  const y = event.clientY - 150;
  
  light.style.setProperty('--light-position-x', `${x}px`);
  light.style.setProperty('--light-position-y', `${y}px`);
});

关键改动说明 #

• position: fixed：让手电筒始终相对于浏览器视口定位，页面滚动时无需额外计算偏移量，自动跟随鼠标在视口中的位置。
• mix-blend-mode: screen：让黄色手电筒区域与下方白色文本混合后变亮，黑色背景区域则保持深色，完美模拟手电筒照亮效果。
• pointer-events: none：防止手电筒元素遮挡鼠标事件，确保页面交互正常。
• 调整位置计算：减去手电筒宽高的一半，让鼠标精准落在圆形中心。

这个方案完全可行，长篇小说滚动时，手电筒会始终跟随鼠标，照亮当前视口内的阅读区域。

内容的提问来源于stack exchange，提问作者Omar Eduardo Barenas