在 CSS 中调整滚动球的高度答案

【问题标题】：Adjusting height of scroll ball in CSS在 CSS 中调整滚动球的高度
【发布时间】：2021-06-17 19:00:43
【问题描述】：

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

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

需要修复标题
需要调整滚动条的高度，使其只滚动一个子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

【问题讨论】：

请花点时间阅读How to Ask并提供minimal reproducible example。
过度滚动行为：包含；溢出-y：滚动；试着把它放在你想要滚动的 div 中
嘿，科林，我试过添加它，但没有用...我已经在我的主要帖子中包含了当前的 html 和 css 代码，你能看看它吗？建议我应该把它们放在哪里？

标签： html css scrollbar

【解决方案1】：

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

.notifications-window {
  height: 400px;
}

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

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

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

【讨论】：

太棒了...继续吧:)