html - 在 CSS 中调整滚动球的高度

Question

是否可以在这里调整滚动条的高度？

我使用了overflow-y:auto，它似乎从标题开始一直到底部，当我滚动时，标题也随之而来。

1. 需要修复标题
2. 需要调整滚动条的高度，让它只滚动一个子div

HTML：

<div class="notifications-window">
    <div class="notifications-header">
        <h4>Notifications</h4>
        <button type="button"><i class="far fa-window-close close-window"></i></button>
    </div>
    <div class="notification-details">
        <p>Congratulations! Login Reward: 2 credits</p>
        <p>Congratulations! Login Reward: 2 credits</p>
        <p>Congratulations! Login Reward: 2 credits</p>
        <p>Congratulations! Login Reward: 2 credits</p>
        <p>Congratulations! Login Reward: 2 credits</p>
        <p>Congratulations! Login Reward: 2 credits</p>
        <p>Congratulations! Login Reward: 2 credits</p>
        <p>Congratulations! Login Reward: 2 credits</p>
        <p>Congratulations! Login Reward: 2 credits</p>
        <p>Congratulations! Login Reward: 2 credits</p>
        <p>Congratulations! Login Reward: 2 credits</p>
        <p>Congratulations! Login Reward: 2 credits</p>
        <p>Congratulations! Login Reward: 2 credits</p>
        <p>Congratulations! Login Reward: 2 credits</p>
        <p>Congratulations! Login Reward: 2 credits</p>
        <p>Congratulations! Login Reward: 2 credits</p>
        <p>Congratulations! Login Reward: 2 credits</p>
    </div>
</div>

CSS：

.notifications-window {
border: 3px solid rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
border-collapse: collapse;
border-radius: 5px;
text-align: center;
width: 350px;
list-style-type: none;
display: inline-block;
}

.notifications-window {
height: 400px;
}


.notifications-window p {
font-size: small;
padding: 5px;
background: rgb(141, 136, 136);
border-radius: 5px;
margin: 5px;
}


.notifications-header h4 {
display: inline-block;
width: 90%;
}

https://i.stack.imgur.com/EEY5f.png

标签： htmlcssscrollbar

Answer 1

您只需要删除样式，因为您添加了不需要的整个部分，也不起作用：

.notifications-window {
  height: 400px;
}

添加此样式，因此仅滚动子 div，如果我们在此基础上使用与滚动相关的样式，则始终需要高度，它将添加滚动：

.notification-details {
  overflow-y: auto;
  max-height: 300px; //change height as per you need/requirement
}

希望这将帮助您/满足您的要求。