实现滚动时动态增长窗口高度，保持滚动条居中

这个需求的核心是让页面能实时响应滚动动作，根据用户的滚动速度动态扩展页面高度，始终让滚动条处于相对窗口中部的位置，避免快速滚动时滚动条触底。我来帮你完善代码并实现完整逻辑：

首先，先把你提到的checkScrollSpeed函数补全，它是检测滚动速度的核心：

// 检测滚动速度的函数，返回单位时间内的滚动距离（px/ms）
var checkScrollSpeed = (function(settings) {
    settings = settings || {
        sensitivity: 200, // 检测间隔（ms）
        resetDelay: 1000  // 无滚动后重置速度的延迟（ms）
    };

    var lastPos, newPos, timer, delta,
        delay = settings.sensitivity,
        resetTimeout;

    function clear() {
        lastPos = null;
        delta = 0;
    }

    clear();

    return function() {
        newPos = window.scrollY;
        if (lastPos != null) { // 有滚动记录时计算差值
            delta = newPos - lastPos;
        }
        lastPos = newPos;
        clearTimeout(resetTimeout);
        resetTimeout = setTimeout(clear, settings.resetDelay);
        return delta / delay; // 返回滚动速度（px/ms）
    };
})();

接下来是核心的滚动监听和高度调整逻辑。我们需要监听scroll事件，根据滚动速度和方向动态调整页面高度，确保滚动条始终处于窗口中部附近：

// 初始配置
const initialWindowHeight = 1000; // 初始窗口高度
const targetScrollRatio = 0.5;    // 目标滚动条位置（窗口高度的50%，即中部）
let currentPageHeight = initialWindowHeight;

// 设置初始页面高度
document.body.style.height = `${currentPageHeight}px`;

// 监听滚动事件
window.addEventListener('scroll', function() {
    const scrollSpeed = checkScrollSpeed();
    const currentScrollY = window.scrollY;
    const windowHeight = window.innerHeight;

    // 计算当前滚动条的相对位置（0=顶部，1=底部）
    const currentScrollRatio = currentScrollY / (currentPageHeight - windowHeight);

    // 只有当向下滚动（scrollSpeed>0）且滚动条超过中部时，才调整高度
    if (scrollSpeed > 0 && currentScrollRatio > targetScrollRatio) {
        // 根据滚动速度计算需要新增的高度：速度越快，新增越多
        // 这里的系数可以根据需求调整，0.8是一个经验值
        const heightToAdd = Math.abs(scrollSpeed) * windowHeight * 0.8;
        
        // 更新页面高度
        currentPageHeight += heightToAdd;
        document.body.style.height = `${currentPageHeight}px`;

        // 可选：让滚动条保持在中部位置（如果需要强制居中的话）
        const targetScrollY = (currentPageHeight - windowHeight) * targetScrollRatio;
        window.scrollTo({
            top: targetScrollY,
            behavior: 'smooth' // 平滑滚动，也可以设为'auto'即时响应
        });
    }

    // 可选：向上滚动时可以适当缩小高度（如果需要的话）
    if (scrollSpeed < 0 && currentScrollRatio < targetScrollRatio - 0.1) {
        const heightToReduce = Math.abs(scrollSpeed) * windowHeight * 0.5;
        currentPageHeight = Math.max(initialWindowHeight, currentPageHeight - heightToReduce);
        document.body.style.height = `${currentPageHeight}px`;
    }
});

关键逻辑说明： #

• 滚动速度检测：checkScrollSpeed通过记录间隔时间内的滚动距离，计算出单位时间的滚动速度，为动态调整高度提供依据。
• 高度调整策略：当用户向下滚动且滚动条超过窗口中部时，根据滚动速度新增页面高度——滚动越快，新增的高度越多，这样能让滚动条始终保持在中部区域，不会快速触底。
• 边界处理：向上滚动时可以选择性缩小高度，但会限制最小高度为初始的1000px，避免页面高度异常。
• 滚动条居中：可选的window.scrollTo调用可以强制滚动条回到中部，如果你希望滚动条严格保持在中间，可以保留这部分；如果只需要让滚动条不会触底，也可以去掉这部分，让滚动自然进行。

注意事项： #

• 可以调整checkScrollSpeed里的sensitivity和resetDelay参数，来改变速度检测的灵敏度。
• 高度调整的系数（比如0.8、0.5）可以根据实际需求微调，找到最适合的响应效果。
• 如果页面有固定定位的元素，需要确保它们不会影响滚动计算。

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