双滚动网站：右侧滚动至最大时隐藏右侧区域的实现问题

你遇到的问题核心是监听错了滚动对象——之前的代码监听的是整个文档（document）的滚动事件，而window.scrollY和document.body.offsetHeight对应的是左侧区域的滚动状态，所以才会出现左侧滚到底时隐藏右侧的情况。

要实现右侧滚动到底时隐藏右侧区域，你需要针对右侧的独立滚动容器来监听滚动事件，而不是整个文档。具体步骤如下：

1. 定位右侧滚动容器 #

首先找到页面中负责右侧滚动的DOM元素（比如它可能有一个特定的class或id，比如right-scroll-container）。

2. 监听右侧容器的滚动事件 #

给这个容器绑定scroll事件，在事件回调里判断它是否滚动到底部。判断滚动到底部的通用公式是：

容器.scrollTop + 容器.clientHeight >= 容器.scrollHeight

• scrollTop：容器已滚动的垂直距离
• clientHeight：容器的可视区域高度
• scrollHeight：容器内容的总高度（包括不可见部分）

3. 实现隐藏逻辑 #

当满足滚动到底的条件时，通过修改样式隐藏右侧区域（可以是设置display: none，或者添加预定义的隐藏类，后者更便于样式维护）。

示例代码 #

假设右侧滚动容器的id是right-container，右侧区域的容器id是right-area，代码可以这样写：

// 获取右侧滚动容器和右侧区域元素
const rightScrollContainer = document.getElementById('right-container');
const rightArea = document.getElementById('right-area');

// 绑定滚动事件
rightScrollContainer.addEventListener('scroll', function() {
  // 判断是否滚动到底部
  const isScrolledToBottom = this.scrollTop + this.clientHeight >= this.scrollHeight;
  if (isScrolledToBottom) {
    // 隐藏右侧区域
    rightArea.style.display = 'none';
    // 或者用类名控制（推荐）
    // rightArea.classList.add('hidden');
  }
});

关键注意点 #

• 不要监听document或window的滚动事件，因为它们对应的是整个页面的滚动（也就是左侧区域的滚动）。
• 如果右侧容器有内边距（padding）或边框（border），scrollHeight已经包含了这些部分，所以上面的判断公式依然有效。
• 如果你需要在滚动离开底部时恢复显示右侧区域，可以在else分支里添加恢复样式的逻辑。

内容的提问来源于stack exchange，提问作者Hell-o