如何使用JavaScript在屏幕滚动位置随机创建元素

问题出在你用绝对定位时，top属性是基于文档顶部计算的，而非当前可见的视口区域。要让元素出现在滚动后的屏幕里，必须结合滚动距离和视口尺寸来计算位置。

修改后的代码如下：

const createF = (a) => {
  // 获取当前垂直滚动距离（文档顶部到视口顶部的像素数）
  const scrollTop = window.scrollY;
  // 获取当前视口的高度和宽度
  const viewportHeight = window.innerHeight;
  const viewportWidth = window.innerWidth;
  
  for (let i = 0; i < a; i++) {
    // 克隆floor元素，用let声明避免全局变量污染
    let xc = document.querySelector('floor').cloneNode();
    
    // 计算随机top值：范围是视口顶部到视口底部，减去元素高度防止完全出界
    const randomTop = scrollTop + Math.random() * (viewportHeight - 5);
    // 计算随机left值：范围是视口左侧到右侧，减去元素宽度防止完全出界
    const randomLeft = Math.random() * (viewportWidth - 50);
    
    xc.style.top = `${randomTop}px`;
    xc.style.left = `${randomLeft}px`;
    xc.style.width = "50px";
    xc.style.height = "5px";
    
    document.querySelector("#DatA").append(xc);
  }
}

关键说明： #

• window.scrollY：获取当前页面滚动后，视口顶部距离文档顶部的像素距离，这是让元素跟随滚动位置的核心。
• window.innerHeight/window.innerWidth：获取当前浏览器可见区域的尺寸，确保元素生成在用户能看到的范围内。
• 计算随机位置时减去元素宽高，是为了避免元素一半在视口外（不需要的话可以直接去掉这部分）。
• 原代码里的xc未用let声明，会变成全局变量，建议加上避免后续代码冲突。

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