Question

角度7：出于某些未知原因，滚动被禁用。我不知道这是否与使用路由器插座有关，还是我在CSS中所做的事情。

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

问题在于，只要将组件放置在路由器插座中并且它的长度超过屏幕上的容纳空间，就没有滚动条，并且用户无法向下滚动以查看屏幕外的内容。

app.component.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，而不是.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>

Tools->Plugins->Available Plugins

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

希望对您有帮助：）

在Angular 7中启用滚动

1 个答案: