时间戳

首页 > 解决方案 > 需要实现一个滚动列表，所选项目可见

javascript - 需要实现一个滚动列表，所选项目可见

问题描述

要求是一个可滚动的项目列表，其中某个项目突出显示，默认情况下可见。因此，如果 100 列表中的第 50 项是特殊选择的项目，则该列表最初将通过向下滚动来显示，因此第 50 项位于列表的中间。

这是一个 MEAN 堆栈应用程序，我已经从服务加载项目并使用 *ngFor 填充模板，但是突出显示特定项目并使该项目默认可见的视觉要求效果不佳。

附加要求（管理不是很好吗？）是每个项目都应该是多行和 html 格式的信息，因此 html 选择可以满足除此之外的所有需求。

我目前正在使用带有 css 溢出的无序列表来处理滚动，但这并不能让我向下滚动到特定项目。

<nav>
  <ol style="height:500px; width:100%; overflow:hidden; overflow-y:scroll;">
    <li *ngFor="let item of list">
      <table>
        <tr *ngIf="item.store_number == my_store; else otherstore"><b>{{item.store_number}}</b></tr>
        <ng-template #otherstore><tr>{{item.store_number}}</tr></ng-template>
        <div style="color:gray">
          <small>
            <tr>{{item.detail[0].address.store_address.line1}}
              {{item.detail[0].address.store_address.line2}}</tr>
            <tr>{{item.detail[0].address.store_address.city}},
              {{item.detail[0].address.shop_store_address.state}}</tr>
          </small>
        </div>
      </table>
    </li>
  </ol>
</nav>

关于如何实现这一点的任何想法？最后一个要求：必须是 html/css/javascript/typescript。没有专门构建的 npm 包，因为管理。

标签： javascripthtmlcssmean-stack

解决方案

推荐阅读