在 CSS 中调整滚动球的高度

Question

这里可以调整滚动条的高度吗？

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

需要修复 header
需要调整滚动条的高度，让它只滚动一个子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

Answer 1

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

.notifications-window {
  height: 400px;
}

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

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

希望这会帮助您 out/meet 您的要求。

在 CSS 中调整滚动球的高度

Adjusting height of scroll ball in CSS

html

css

scrollbar