Question

我希望有一个固定的容器（传单地图），可以滚动包含所选地图项信息的列表。

我的列表可以在地图上滚动，应该从屏幕底部开始，然后向上滚动直到它显示其所有内容。我正在使用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>

css：

  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;
}

在固定元素上滚动列表

1 个答案: