CSS - 如何在div中滚动列表

Question

如何只滚动列表？我想要.text和.link-item固定,只在容器内的列表上滚动.

.container {
  position: relative;
  float: right;
  width: 74.4%;
  height: 150px;
  background-color: rgb(230, 230, 233);
  margin-top: 30px;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  text-align: left;
  border-radius: 4px;
}

.text {
  position: fixed;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  color: rgb(116, 124, 142);
  float: left;
  padding: 10px 0px 0px 40px;
}

.box {
  position: absolute;
  padding: 20px 50px 0px 30px;
  color: rgb(116, 124, 142);
  font-size: 15px;
}

.link-item {
  position: absolute;
  top: 15px;
  width: 100%;
  font-weight: 400;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  color: rgb(87, 135, 253);
  text-align: right;
  padding-right: 40px;
  text-decoration: none;
}

<div class="container">
  <div class="text">ACTION ITEMS</div>
  <div class="box">
    <ul>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
    </ul>
  </div>
  <a href="www.something.com" class="link-item">GO TO THE LAST ITEM</a>
</div>

Answer 1

注意:除了CSS部分,我也回答了GO TO THE LAST ITEM.不知道为什么,这是可以做到只单独使用CSS,为GO TO THE LAST ITEM需要的JavaScript.我只是担心,因为我的答案已被低估了,所以补充说明.

你不能只使用CSS来实现GO TO THE LAST ITEM.添加overflowCSS,您需要使用JavaScript使其滚动到底部:

document.querySelector('.box').scrollTop = 1000;

.container {
  position: relative;
  float: right;
  width: 74.4%;
  height: 150px;
  background-color: rgb(230, 230, 233);
  margin-top: 30px;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  text-align: left;
  border-radius: 4px;
}

.text {
  position: fixed;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  color: rgb(116, 124, 142);
  float: left;
  padding: 10px 0px 0px 40px;
}

.box {
  position: absolute;
  padding: 20px 50px 0px 30px;
  color: rgb(116, 124, 142);
  font-size: 15px;
  overflow: auto;
  height: 100px;
}

.link-item {
  position: absolute;
  top: 15px;
  width: 100%;
  font-weight: 400;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  color: rgb(87, 135, 253);
  text-align: right;
  padding-right: 40px;
  text-decoration: none;
}

<div class="container">
  <div class="text">ACTION ITEMS</div>
  <div class="box">
    <ul>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
    </ul>
  </div>
  <a href="www.something.com" class="link-item" onclick="document.querySelector('.box').scrollTop = 10000; return false;">GO TO THE LAST ITEM</a>
</div>