如何阻止滚动元素到达屏幕中间后继续滚动？

你的核心需求是让文本元素滚动到屏幕垂直中间位置时，停止通过marginRight控制的位移。现有代码的问题在于用固定的scrollY阈值判断，没有结合元素自身的实时位置，导致判断不准确。

可以通过以下步骤调整代码：

• 不再依赖固定的scrollY数值，而是实时计算文本元素的垂直中心位置和视口的垂直中间位置
• 当文本中心到达或超过视口中间时，停止修改marginRight；否则继续执行位移逻辑

修改后的代码如下：

let text = document.getElementById('text');
const scaler = 1/25;
const viewportMiddle = window.innerHeight / 2; // 视口垂直中间位置

window.addEventListener('scroll', function(){
    let value = window.scrollY;
    const textRect = text.getBoundingClientRect(); // 实时获取元素位置
    const textCenterY = textRect.top + textRect.height / 2; // 文本元素的垂直中心

    // 只有当文本中心还在视口中间下方时，才继续移动文本
    if (textCenterY > viewportMiddle) {
        text.style.marginRight = value * 3 * scaler + 'vw';
    }
})

关键说明： #

• getBoundingClientRect()需要在scroll事件内实时获取，因为元素的位置会随marginRight变化而改变，初始化时获取的数值会失效
• viewportMiddle是视口高度的一半，代表屏幕垂直中间位置
• textCenterY计算的是文本元素自身的垂直中心，通过对比它和viewportMiddle的大小，能准确判断元素是否到达屏幕中间

如果你的“屏幕中间”是指水平中间，可以调整判断逻辑为文本的水平中心（textRect.left + textRect.width / 2）与视口水平中间（window.innerWidth / 2）对比，修改对应的条件即可。

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