gpt4 book ai didi

html - CSS - 如何在 div 中滚动列表

转载 作者:太空宇宙 更新时间:2023-11-04 13:45:26 25 4
gpt4 key购买 nike

如何只滚动列表?我想要固定 .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>

关于html - CSS - 如何在 div 中滚动列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47398921/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com