游戏网站指定位置禁用向下滚动但保留向上滚动的实现方法

嘿，我完全懂你的需求——在滚动到「第二箭头」那个位置后，只想让用户能向上滚回，不能继续向下滑，之前用overflow-y:hidden确实不行，因为它会把上下滚动都锁死，根本达不到你要的效果。咱们可以通过监听滚动事件，手动控制滚动位置来实现这个需求，刚好可以结合你现有的判断逻辑来做。

思路说明 #

你已经在判断当窗口底部超过.main-rules元素底部时显示.game-section，那我们就基于这个逻辑：当滚动到这个临界点后，一旦用户尝试向下滚动超过允许的最大位置，就强制把滚动条拉回到这个最大位置；如果是向上滚动，就完全不干预，让用户正常操作。

修改后的代码实现 #

首先，我们先定义一个变量，存储允许滚动的最大scrollTop值（也就是刚好让窗口底部碰到.main-rules底部的那个滚动位置）：

// 计算允许的最大滚动位置
let maxScrollTop = $('.main-rules').position().top + $('.main-rules').outerHeight() - $(window).outerHeight();

然后结合你原有的逻辑，监听滚动事件并控制滚动行为：

$(window).on('scroll', function() {
    const currentScrollTop = $(window).scrollTop();
    const BotOfWin1 = currentScrollTop + $(window).outerHeight();
    const BotOfObj1 = $('.main-rules').position().top + $('.main-rules').outerHeight();

    // 原有的显示/隐藏.game-section的逻辑
    if (BotOfWin1 > BotOfObj1) {
        $('.game-section').css({"display": "block"});
        // 禁止向下滚动：如果当前滚动位置超过最大值，强制拉回
        if (currentScrollTop > maxScrollTop) {
            $(window).scrollTop(maxScrollTop);
        }
    } else {
        $('.game-section').css({"display": "none"});
        // 未到临界点，允许正常滚动
    }
});

额外的适配处理 #

如果你的页面元素高度或者窗口大小会动态变化（比如用户缩放窗口），记得在窗口 resize 事件里重新计算maxScrollTop，避免位置不准：

$(window).on('resize', function() {
    maxScrollTop = $('.main-rules').position().top + $('.main-rules').outerHeight() - $(window).outerHeight();
});

为什么这个方案可行 #

和overflow-y:hidden不同，这个方案不是直接锁死滚动，而是针对性拦截向下滚动的越界行为，当用户试图滚过临界点时，立刻把滚动条拉回允许的最大位置，这样用户仍然可以向上滚动回到之前的内容，完美满足你的需求。

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