javascript - 在Web开发中解决内外层滚动冲突的方法？

Question

怎么处理内外层滚动？

需求是这样的，外层outter是可滚动的，然后中间有一段inner也是可滚动的，关系如下图

希望的操作是黄色范围完整出现在绿色范围后开始滚动蓝色范围，蓝色滚动到底后继续滚动红色范围
我试过js控制overflow：hidden和auto切换，可是会导致滚动中断
大佬有什么好的建议么

Answer 1

处理Web开发中内外层滚动冲突的问题，一个常见的解决方案是使用JavaScript来监听内层滚动事件，并在滚动到底部或顶部时阻止其继续滚动，转而让外层滚动。以下是一个基本的示例代码，用于实现你描述的需求：

// 假设 outerDiv 和 innerDiv 分别是外层和内层滚动的DOM元素const outerDiv = document.getElementById('outerDiv');const innerDiv = document.getElementById('innerDiv');// 监听内层滚动事件innerDiv.addEventListener('scroll', function(e) {  // 获取内层滚动的当前位置  const scrollTop = innerDiv.scrollTop;  const scrollHeight = innerDiv.scrollHeight;  const clientHeight = innerDiv.clientHeight;  // 判断是否滚动到底部  if (scrollTop + clientHeight >= scrollHeight) {    // 阻止内层继续滚动    e.preventDefault();        // 开始外层滚动    outerDiv.scrollTop += 1; // 这里可以根据需要调整滚动的量  }  // 判断是否滚动到顶部  if (scrollTop <= 0) {    // 阻止内层继续滚动    e.preventDefault();        // 开始外层滚动    outerDiv.scrollTop -= 1; // 这里可以根据需要调整滚动的量  }});

这段代码通过监听内层滚动事件，并在滚动到顶部或底部时阻止其继续滚动，转而让外层滚动。你可以根据自己的需求调整滚动的量和方向。

请注意，这只是一个基本的示例代码，实际使用时可能需要进行一些调整和优化，以适应具体的项目需求。此外，还可以考虑使用第三方库，如perfect-scrollbar等，它们提供了更丰富的滚动控制和自定义选项，可以更方便地解决内外层滚动冲突的问题。