如何只滚动列表?我想要固定 .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>
Note: Along with the CSS part, I have also answered the GO TO THE LAST ITEM
. Not sure why this can be done just by using CSS alone, as GO TO THE LAST ITEM
needs JavaScript. I am just concerned because my answer has been downvoted so added this note.
您不能只使用 CSS 来实现 GO TO THE LAST ITEM
。添加 overflow
CSS,您需要使用 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>
我是一名优秀的程序员,十分优秀!