HTML5声明下JavaScript定时器控制浮动层top属性失效求助

问题根源在于浏览器标准模式与怪异模式的滚动对象差异：

• 不加<!DOCTYPE html>时，浏览器启用怪异模式，页面滚动偏移量存储在document.body.scrollTop
• 添加HTML5文档声明后，浏览器切换到标准模式，滚动偏移量改为存储在document.documentElement.scrollTop

你的代码里var _y = document.body.scrollTop + y;在标准模式下document.body.scrollTop始终为0，导致浮动层的目标位置一直固定在250px，自然无法跟随页面滚动调整位置。

修复步骤： #

1. 兼容获取滚动偏移量：同时读取两种容器的scrollTop值，取有效数值
2. 合并冗余定时器：两个50ms的定时器可以合并为一个，减少不必要的性能消耗
3. 稳定数值计算：处理初始状态下可能出现的parseInt返回NaN的情况

修改后的完整代码： #

<!DOCTYPE html>
<html>
<body onLoad="initSession()">

<div id="demo"></div>

<div id="flotLayer" style="position:absolute;width:60px;height:60px;z-index:30;visibility:hidden;right: 10px;top:0px;">
<div style="width:100px; height:100px; border:solid 1px #cccccc">floatLayer</div>
</div>
<div style="width:100px; height:5000px;"></div>

<script>
// 合并定时器，统一执行两个函数
setInterval(() => {
  myTimer();
  MoveLayer();
}, 50);

function myTimer() {
  const d = document.getElementById('flotLayer').style.top;
  document.getElementById("demo").innerHTML = d;
}

function initSession() {
    document.getElementById('flotLayer').style.visibility = 'visible';
    MoveLayer(); 
    myTimer();
}

function MoveLayer() {
    var x = 50;
    var y = 250; 
    // 兼容两种模式的滚动偏移量获取
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var _y = scrollTop + y;
    
    // 确保当前top值为有效数字，避免NaN
    var currentTop = parseInt(document.getElementById('flotLayer').style.top) || 0;
    var diff = (_y - currentTop) * 0.5;
    var rey = _y - diff;

    document.getElementById('flotLayer').style.top = rey + "px";
    document.getElementById('flotLayer').style.right = x + "px";
}
</script>

</body>
</html>

关键改动说明： #

• var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;：自动适配标准/怪异模式下的滚动容器
• 合并两个setInterval，避免重复触发定时器造成资源浪费
• var currentTop = parseInt(...) || 0;：防止初始状态下style.top为空导致计算异常

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