位置：粘滞，使粘滞项在滚动时脱离屏幕

Question

滚动到右侧后，我无法将粘性项目保留在视口中：

* {
  box-sizing: border-box;
}

.viewport {
  position: relative;
  overflow: auto;
  width: 300px;
  height: 150px;
}

.cell {
  width: 80px;
  border: 1px solid red;
  padding: 5px;
  background: white;
}

.sticky {
  position: sticky;
  left: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(8, 80px);
}

<div class="viewport">
    <div class="grid">
      <div class="cell sticky">sticky</div>
      <div class="cell sticky" style="left: 80px">stick 2</div>
      <div class="cell">cell</div>
      <div class="cell">cell</div>
      <div class="cell">cell</div>
      <div class="cell">cell</div>
      <div class="cell">cell</div>
      <div class="cell">cell</div>
    </div>
</div>
  

我知道可以将它们保留在视口中，例如Kendo可以这样做-https://stackblitz.com/edit/react-jmfqqv?file=app/main.jsx

这与拥有right属性（经过测试）无关，我不知道他们正在做什么以阻止这些物品消失？

无论滚动位置如何，如何始终保持粘性项目...保持粘性？