javascript - 在固定元素上滚动列表

Question

我想要一个固定的容器(传单 map )，可以滚动包含有关所选 map 项的信息的列表。

我想到了这个 https://jsfiddle.net/m5ntbyxs/5/

我的列表，可以在 map 上滚动，应该从屏幕底部开始，并且能够向上滚动直到显示所有内容。我正在使用 translate 将列表放置在屏幕的下方。本地图上没有选择任何元素时，列表应该向下滚动并且不可见。只需设置 transform: translateY(100vh) 仅在用户之前未向上滚动列表时有效。然后用户滚动列表的数量仍然可见。

但它还有另一个问题:它使用 fixed 布局，这会将容器从流中移除，因此它无法在同时显示标题栏和导航栏的应用程序外壳中正常运行。

有没有办法在没有固定元素的情况下实现这种效果？

jQuery 不是解决此问题的选项。

Answer 1

让它像这样工作:

html:

<div class="box">
  <div class="menu"><h1>div.menu</h1></div>
    <div class="map">
      <p class="title">div.title</p>
      <div class="out" id="scroll">
        <li class="empty"></li>
        <li>a line of text</li>
        <li>a line of text</li>        
        <li>a line of text</li>
        <li>a line of text</li>
        <li>a line of text</li>
        <li>a line of text</li>
        <li>a line of text</li>
        <li>a line of text</li>
        <li>a line of text</li>
        <li>a line of text</li>
        <li>etc...</li>
      </div>
    </div>
  <div class="down"><p>div.down</p></div>
</div>

样式:

  body {
    background-color: darkslategray;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
  }

  .box {
    color: gainsboro;
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    flex-flow: column nowrap;
  }

  .menu {
    text-align: center;
    border: solid 1px;
    padding: 10px 0 0;
    flex: 1 1 auto;
    order: 1;
    &>h1 {
      border: solid 1px;
    }
  }

.map {
  display: block;
  background: teal;
  text-align: center;
  position: relative;
  overflow: hidden;
  flex: 10 10 auto;
  order: 2;
  &>.title {
    position: absolute;
    border: solid 1px;
    background: teal;
    margin: 0 1%;
    width: 98%;
    padding: 16px 0;
    font-size: 24px;
    z-index: 2;
  }
  &>.out {
    overflow-y: auto;
    position: absolute;
    height: 100%;
    width: 98%;
    margin: 0 1%;
    display: block;
    border: solid 1px white;
    z-index: 1;
    &::-webkit-scrollbar {
      display: none;
    }
    &>.empty {
      content: "";
      margin: 0;
      height: 90%;
      margin: 5px;
      border: solid 1px;
      position: realtive;
      background: none;
    }
    &>li {
      list-style-type: none;
      padding: 10px;
      margin: 5px;
      border: solid 1px;
      font-size: 16px;
    }
  }
}
.down {
  text-align: center;
  display: block;
  position: relative;
  border: solid 1px;
  flex: 1 1 auto;
  order: 3;
}