Changing the scroll ball's height using CSS

Can the scrollbar height be adjusted in this section?

I've tried using overflow-y:auto, but it seems to start from the header and extend all the way to the bottom. When I scroll, the header moves along with it.

  1. Header needs fixing
  2. Scrollbar height adjustment needed to only scroll a sub 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%;
}

htmlcssscrollbar

Answer №1

To achieve the desired result, it is recommended to remove the unnecessary style that applies to the entire section:

.notifications-window {
  height: 400px;
}

Instead, add this style to only scroll the sub div and ensure a proper height for the scroll functionality:

.notification-details {
  overflow-y: auto;
  max-height: 300px; //adjust height as needed
}

This adjustment should help meet your requirements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Pressing a button meant to transfer text from a textarea results in the typed content failing to show up

Having trouble with a custom text area called a math field. I'm currently interning on a project to build a math search engine, where users can input plain text and LaTeX equations into a query bar. The issue I'm facing is that sometimes when th ...

javascripthtmlflexbox

When inserting the HTML of a webpage into an iframe, the displayed content may vary slightly from the original page

I am facing an issue with my webpage where I extract the html, transmit it via websockets using socket.io to another page containing an empty iframe, and then inject the html dynamically into the iframe. My code for injecting the html looks like this: fr ...

jquerycssdebuggingnode.jsiframe

Error in onchange event due to incorrect index variable

My goal is to add onchange events to select tags within a div that contains multiple tags. To achieve this, I am using a for loop to attach events to each tag. The purpose of these events is to update a select tag in another container by removing the "disa ...

javascripthtml

ID is not receiving the CSS styles

I'm having trouble applying my CSS to a specific img ID element on the page. I've been trying to solve this for about 30 minutes with no luck. The strange thing is, I have two other elements with the same HTML and CSS that are working correctly. ...

htmlcss

Preload-webpack-plugin does not support pre-fetching files

I have a query about prefetching and preloading content. In my vue app, I noticed that after building, I have duplicate files loaded in my dist/index.html file. Here is an example: Additionally, the "scripts" are not being preloaded/prefetched as expec ...

javascripthtmlvue.jswebpackvue-cli

Showing the number of times a button has been pressed

I have written some HTML code to create a button and now I am looking for guidance on how I can use Vue.js to track how many times the button has been clicked. Here is what I have so far: <div class="123"> <button id = "Abutton&q ...

javascripthtmlvue.jsbutton

adjust the div's position based on the window's scrolling bars

Is there a way to make my div move down when the window scrolls down and up when the window scrolls up? How can I achieve this effect? ...

htmlcsspositioning

Controlling screen size in fullscreen mode for HTML5 videos: a guide to manipulation

Within my website, I have incorporated a <video> element nestled inside a <div>. This particular <div> serves the purpose of defining the video aspect ratio, allowing users to adjust it if necessary (for instances where the encoded video ...

csshtmlvideofullscreen

Are you familiar with PowerShell and its innovative modular GUI capabilities?

One challenge I face is assisting clients who constantly monitor the performance of their servers, services, and network. Utilizing PowerShell, I envisioned creating a unified GUI interface for all these tasks, including remote log tailing capabilities. B ...

c#htmlpowershelluser-interface

Avoiding leaps through the use of dynamic pictures?

Currently, I am implementing the picture element along with srcset to download the same image but in varying resolutions depending on the screen size of the device. The image has a style of max-width: 100%, causing it to shift the content below when downl ...

javascripthtmlcss

Increase transparency of scrollbar background

Is it possible to adjust the opacity of a scrollbar track? I attempted to use opacity:0.5, but it didn't have any effect. I am using material UI styled, although I don't believe that is causing the issue. const Root = styled('div')(({ ...

cssmaterial-ui

Limit the character count in a textarea

My goal is to control the number of characters that can be entered into a textarea. While I am aware that I could simply use a substring to limit the characters, I prefer to visually inform the user when their text has reached the maximum length. The maxl ...

phpjavascripthtml

Switching the position to fixed causes it to lose its justification functionality

My goal is to create a table using div elements. However, when I set the header to have a fixed position to prevent it from disappearing when scrolling through more data, all the header cells shift to the right. I attempted to adjust the margin-left proper ...

htmlcss

Mpdf does not support inline CSS rendering

I recently implemented Mpdf into my Symfony project using Composer. The installation process involved running the following command: composer require mpdf/mpdf Next, I included the Mpdf.php file in autoload.php. Here is an example of how to use Mpdf in ...

phpcsssymfonympdf

When using JavaScript to dynamically load canvases and create drawing contexts within a function, the context may suddenly disappear

Currently, I am modifying the canvases displayed through ajax calls and also updating what is drawn on each canvas. The primary issue I am facing is that my main drawing function fails on getContext and there are some unusual behaviors such as missing canv ...

javascriptjqueryajaxhtmlcanvas

How to Filter Fields in AngularJS Based on a Start Date and End Date?

Hey everyone, I'm trying to filter items based on the start and end dates using the daterange functionality in my meanjs app. I've tried multiple approaches but haven't found a solution yet. If anyone knows how to do this, please help me out ...

htmlcssangularjsmeanjs

Ways to adjust the anchor and h1 elements using CSS

I'm working on an HTML document with some markup, <a class="home-link" href="index.html" rel="home"> <h1 class="site-title">John Arellano's Personal Website</h1> </a> While styling the site title, I encountered a problem ...

htmlcss

Creating the main webpage's HTML through the Codebehind feature in ASP.Net using VB

Currently, I am immersed in a recreational project aimed at enhancing my understanding of vb.net and its interconnectivity. I welcome any suggestions that could potentially enhance the efficiency of my approach! My present focus involves extracting data f ...

jqueryasp.nethtmlvb.net

The functionality of two-way data binding seems to be failing when it comes to interacting with Knock

I am currently working on a piece of code that consists of two main functions. When 'Add more' is clicked, a new value is added to the observable array and a new text box is displayed on the UI. Upon clicking Save, the values in the text boxes ...

javascripthtmlmvvmdata-bindingknockout.js

What is the best way to open the index.html file in electron?

I'm currently developing a cross-platform app using electron and Angular. As of now, the code I have for loading my index.html file looks like this: exports.window = function window() { this.createWindow = (theBrowserWindow) => { // Create ...

javascripthtmlelectronload