树状嵌套列表结构中的粘性行

debugcn 发表于 Dev

菲尔294

我有一长串嵌套的项目。

section#container {
  height: 250px;
  width: 350px;
  overflow: auto;
}

li {
  position: relative;
  background: white;
}

div {
  position: sticky;
  top: 0;
}

<section id="container">
  <ul>
    <li>
      <div>Aaaaaaaaaaaa</div>
      <ul>
        <li>
          <div>Bbbbbbbbbbbb</div>
        </li>
        <li>
          <div>Cccccccccc</div>
        </li>
        <li>
          <div>Dddddddddddd</div>
          <ul>
            <li>
              <div>Eeeeeeeeee</div>
            </li>
            <li>
              <div>Fffffffff</div>
              <ul>
                <li>
                  <div>Ggggg</div>
                </li>
                <li>
                  <div>Hhhh</div>
                </li>
                <li>
                  <div>Iiii</div>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <pre>More<br>content<br>so<br>we<br>can<br>scroll<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.</pre>
    </li>
  </ul>
</section>

滚动时，我总是希望看到“通向当前第一行的路径”。例如，向下滚动时，您应该看到

A                          # "Path"
   B                       # leading up to
      D                    # G (breadcrumbs)
         F                 #
            G
            H
            ...

或者，也许更好的可视化，看到这个演示的marchaos /反应虚拟化粘树。它正是我想要的。但是，该库使用JavaScript，并且仅top根据嵌套级别设置属性。我正在寻找一个简单的纯CSS解决方案（取决于递归的数量），我认为它应该是相当基本的，但是我似乎找不到解决方案。

在上面的代码段中，我尝试position:sticky在divs上进行这样的操作，虽然有些奏效，但不幸的是它们都在同一行上。感谢您的任何提示。

牧师加德

您可以简单地设置z-index单个内容，以使其与没有sticky位置的其他内容区分开，并设置top它们的位置。

记住要设置top一个彼此不同的位置，以使它们彼此对齐，因为如果设置相同，top则会导致重叠。

以下是一个例子

section#container {
  height: 240px;
  width: 350px;
  overflow: auto;
}

li {
  position: relative;
  background: white;
}

div {
  position: sticky;
}

.first {
  z-index: 99999;
  background: red;
  top: 0;
}

.second {
  z-index: 99999;
  background: blue;
  top: 15px;
}

.third {
  z-index: 99999;
  background: green;
  top: 30px;
}

<section id="container">
  <ul>
    <li>
      <div class="first">Aaaaaaaaaaaa</div>
      <ul>
        <li>
          <div>Bbbbbbbbbbbb</div>
        </li>
        <li>
          <div>Cccccccccc</div>
        </li>
        <li>
          <div class="second">Dddddddddddd</div>
          <ul>
            <li>
              <div>Eeeeeeeeee</div>
            </li>
            <li>
              <div class="third">Fffffffff</div>
              <ul>
                <li>
                  <div>Ggggg</div>
                </li>
                <li>
                  <div>Hhhh</div>
                </li>
                <li>
                  <div>Iiii</div>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <pre>More<br>content<br>so<br>we<br>can<br>scroll<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.</pre>
    </li>
  </ul>
</section>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。