处理溢出和 position: sticky;

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

任何 overflow 值(除了 visible 和没有高度)都是具有 position: sticky; 的子元素的敌人。就像该元素准备在父元素滚动时粘住,但由于高度不受限制,它永远不会粘住。添加固定高度可以解决此问题,但这并不总是理想的。

Dannie Vinther 深入研究了一种处理方法。最终结果是通过从需要溢出的元素中移除想要粘住的元素来完全避免这种情况。但是,一旦这样做,元素将不再一起滚动,因为它们不是兄弟元素。此处的用例是一个表格,该表格在垂直滚动时具有粘性标题,并且也允许水平滚动。Dannie 使用脚本同步滚动位置。

直链 →