Question

所以我的情况是这样的，我有很多div ...很多（超过300）并且我使用它们作为交互式背景的一部分。编辑:(他们都有相同的班级）

问题？因为在移动设备上我需要更多的div来填充页面而不是在桌面上，我在桌面上有太多的div，这意味着你可以滚动比我想要的更多。我怎么能拥有它所以Divs低于某一点被删除或（更有用的）如何在一定数量的像素后停止滚动。

我实际上根本不知道如何做到这一点，我尝试过边距，填充，溢出，位置：固定;但我没有找到解决方案，所以不要纠缠我的“缺乏努力” （我的一些帐户已被封锁，因为我没有合理的想法该做什么，而你的“酷孩子”决定低估我的阻力（谢谢你！）

无论如何足够的抨击。帮助将不胜感激！提前谢谢。

Answer 1

你可以做两件事：

将所有内容包装在div中并设置高度并溢出-y：hidden。

.wrapper{ height: 1000px; overflow-y: hidden }

使用CSS，您可以在特定数字后隐藏元素。就像你想在100之后隐藏所有div

.container .className:nth-child(n+101) { display: none; }

这将隐藏100后的所有div。

Answer 2

将所有div放在容器div中并使用此css

.container{
   max-height:900px; // Set this value to the no of pixel you want to scroll
   overflow:hidden;
}

我已将max-height设置为900px因为我只想显示9个div，每个div的高度为100px。

<强>段

＆＃13;

.item {
  width: 100%;
  height: 100px;
  background-color: red;
}

.item:hover {
  background-color: yellow;
}

.container {
  max-height: 900px;
  overflow: hidden;
}

＆＃13;

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  
  <!--You cant scroll after that-->
  
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
</div>

＆＃13;

在某个div下停止身体滚动

2 个答案: