css - 在 Angular 7 中启用滚动

Question

Angular 7:由于某些未知原因，滚动被禁用。我不知道这是否与使用路由器 socket 有关，或者我在 css 中做了什么。

我将我的 1 个组件的代码放在这里。每个组件都对容器 div 使用相同的 css。

问题是任何时候一个组件被放置在路由器 socket 中并且它的长度超过了屏幕所能容纳的长度，没有滚动条并且用户无法向下滚动以查看屏幕外的内容。

应用程序组件.html:

<app-navigation></app-navigation>
<router-outlet></router-outlet>

view-ratings.component.html:

<div class="container" >
    /* a whole bunch of content */
</div>

view-ratings.component.css:

.container {
    position: fixed;
    top: 7em;
    width:90%;
    max-width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    display: flex;
    flex-wrap: wrap;
}

Answer 1

您的容器是固定的，可能会在页面底部结束。 .container 的容器不能创建固定框的滚动条。您有多种可能性，一种是在我的示例中将框的末端设置为 bottom: 5px。

.container {
  position: fixed;
  top: 7em;
  width: 90%;
  max-width: 90%;
  margin-right: 5%;
  margin-left: 5%;
  display: flex;
  flex-wrap: wrap;
  /* solution */
  bottom: 5px;
  overflow: auto;
  
  /* style */
  box-sizing: border-box;
  background-color: red;
  padding: 15px;
  
}

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta pellentesque massa non blandit. Nulla a ullamcorper quam. Suspendisse tincidunt nec erat quis viverra. Nam consequat massa magna, quis venenatis sem iaculis vel. Nulla ullamcorper
  dictum sapien nec cursus. Quisque interdum pulvinar magna, in tincidunt eros ultricies sit amet. Aliquam vel condimentum leo. Aenean tellus enim, posuere sed erat sit amet, pulvinar ultrices magna. Sed vitae iaculis nulla. Donec scelerisque eleifend
  magna ullamcorper sagittis. Aliquam venenatis mi lectus, sed suscipit velit ornare sit amet. Maecenas et tellus tellus. Praesent efficitur nibh a ipsum ultrices faucibus. Pellentesque erat dolor, consectetur eget congue et, aliquam suscipit justo. In
  hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse dictum maximus odio luctus fermentum. Vivamus ipsum erat, rutrum id felis eu, commodo fringilla neque. Donec in lacus
  magna. Phasellus tortor velit, aliquet id interdum et, facilisis ut erat. Maecenas venenatis lacus dui, ut vestibulum elit ornare id. Suspendisse potenti. Cras egestas libero nisl, sed blandit metus auctor vitae. Morbi vulputate nunc leo, sed lacinia
  arcu tempus in. Praesent a leo tortor. Morbi pharetra finibus mi, vel hendrerit justo lobortis at. Quisque tempus sem non neque placerat, a tincidunt neque lacinia. Pellentesque laoreet ex orci, id varius ante ornare eget. Curabitur volutpat quam gravida
  diam mattis laoreet. Praesent et mauris rutrum, scelerisque metus ut, convallis mi. Suspendisse eget lacinia lacus. Ut faucibus, ante id convallis elementum, neque lorem malesuada felis, ac imperdiet felis nisl ac urna. Aenean sagittis in arcu ac imperdiet.
  Fusce vitae convallis dui. Fusce condimentum tortor eget commodo volutpat. Morbi enim neque, dictum sed venenatis quis, dictum vel libero. Nulla ullamcorper eros ut sapien gravida ullamcorper. Mauris sit amet dolor a tellus sagittis maximus. Vivamus
  vehicula maximus magna, eget viverra tortor porta nec. Quisque gravida risus eget laoreet cursus. Nam vestibulum ullamcorper purus eget scelerisque. Integer lacinia faucibus ipsum, mattis convallis ex lacinia nec. Nunc commodo et ante vitae iaculis.
  Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam semper cursus rutrum. Duis sit amet fermentum mauris. Vestibulum ultricies vehicula ipsum at rutrum. Curabitur at felis lacus. Quisque porta enim vitae arcu commodo vulputate. Aliquam
  condimentum et ex ac cursus. Proin facilisis lorem ac augue cursus, congue posuere velit consectetur.
</div>

另一种解决方案是设置您的方框 position: absolute; 或不是 fixed 然后是您的 body 来创建滚动条。

.container {
  
  top: 7em;
  width: 90%;
  max-width: 90%;
  margin-right: 5%;
  margin-left: 5%;
  display: flex;
  flex-wrap: wrap;
  /* solution */
  /* position:fixed; */
  position: absolute;
  overflow: auto;
  
  /* style */
  box-sizing: border-box;
  background-color: red;
  padding: 15px;
  margin-bottom:50px;
  
}

<div class="container">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta pellentesque massa non blandit. Nulla a ullamcorper quam. Suspendisse tincidunt nec erat quis viverra. Nam consequat massa magna, quis venenatis sem iaculis vel. Nulla ullamcorper
      dictum sapien nec cursus. Quisque interdum pulvinar magna, in tincidunt eros ultricies sit amet. Aliquam vel condimentum leo. Aenean tellus enim, posuere sed erat sit amet, pulvinar ultrices magna. Sed vitae iaculis nulla. Donec scelerisque eleifend
      magna ullamcorper sagittis. Aliquam venenatis mi lectus, sed suscipit velit ornare sit amet. Maecenas et tellus tellus. Praesent efficitur nibh a ipsum ultrices faucibus. Pellentesque erat dolor, consectetur eget congue et, aliquam suscipit justo. In
      hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse dictum maximus odio luctus fermentum. Vivamus ipsum erat, rutrum id felis eu, commodo fringilla neque. Donec in lacus
      magna. Phasellus tortor velit, aliquet id interdum et, facilisis ut erat. Maecenas venenatis lacus dui, ut vestibulum elit ornare id. Suspendisse potenti. Cras egestas libero nisl, sed blandit metus auctor vitae. Morbi vulputate nunc leo, sed lacinia
      arcu tempus in. Praesent a leo tortor. Morbi pharetra finibus mi, vel hendrerit justo lobortis at. Quisque tempus sem non neque placerat, a tincidunt neque lacinia. Pellentesque laoreet ex orci, id varius ante ornare eget. Curabitur volutpat quam gravida
      diam mattis laoreet. Praesent et mauris rutrum, scelerisque metus ut, convallis mi. Suspendisse eget lacinia lacus. Ut faucibus, ante id convallis elementum, neque lorem malesuada felis, ac imperdiet felis nisl ac urna. Aenean sagittis in arcu ac imperdiet.
      Fusce vitae convallis dui. Fusce condimentum tortor eget commodo volutpat. Morbi enim neque, dictum sed venenatis quis, dictum vel libero. Nulla ullamcorper eros ut sapien gravida ullamcorper. Mauris sit amet dolor a tellus sagittis maximus. Vivamus
      vehicula maximus magna, eget viverra tortor porta nec. Quisque gravida risus eget laoreet cursus. Nam vestibulum ullamcorper purus eget scelerisque. Integer lacinia faucibus ipsum, mattis convallis ex lacinia nec. Nunc commodo et ante vitae iaculis.
      Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam semper cursus rutrum. Duis sit amet fermentum mauris. Vestibulum ultricies vehicula ipsum at rutrum. Curabitur at felis lacus. Quisque porta enim vitae arcu commodo vulputate. Aliquam
      condimentum et ex ac cursus. Proin facilisis lorem ac augue cursus, congue posuere velit consectetur.
    </div>

这取决于您要查找的结果。

希望这对你有帮助:)