移动模式下的溢出、固定、粘性元素问题

Question

问题： 我的布局面临一个问题，涉及移动模式下的溢出、固定和粘性元素。这是场景：

我的内容以表格形式呈现，第一个表格需要有一个粘性标题。由于这个要求，我无法将所有表包装在溢出容器中。相反，我嵌套了一个 div 以使其位置粘性，并且子元素具有溢出-x：滚动。

这是一个简化的结构：

• 标题（固定）
• Div（滚动粘性），子元素（带溢出的表格）T
• 有溢出的桌子 有溢出的桌子

只要我在浏览器开发工具中以响应模式查看它，此布局就可以在桌面模式下按预期运行。但是，当我切换到“设备模拟模式（特定型号）”时，position:fixed 和position:sticky 元素的行为方式发生了变化，并且不再按预期工作。

具体来说，位置：固定元素现在继承具有溢出的同级元素的宽度，并且位置：粘性行为被破坏。

我什至在真实的移动设备上对此进行了测试，问题仍然存在。

有人可以阐明这里可能发生的情况，并提供有关在移动设备上处理此布局挑战的替代方法的建议吗？我们将非常感谢您的见解。

这里有一个链接，您可以在 Web 开发模式下亲自查看。 https://sunny-souffle-948467.netlify.app/

不工作

工作时，请注意标题“结束标题”中的注释/文本

Answer 1

你的 CSS 工作正常。看看你的 JavaScript。

移动端未添加scrollTime类。尝试对移动设备使用“touchmove”事件。