How can I implement two unique custom scrollbars on a single webpage?

I'm attempting to customize the scrollbar for a scrollable div separately from the scrollbar for the entire window. Despite my efforts, I haven't been successful in achieving two different colored scrollbars.

*{
margin: 0;
padding: 0;
font-family: 'segoe ui light';
}
header{
width: 100%;
height: 300px;
background: #efefef;
}
.container{
width: 90%;
margin: auto;
}
h1{
padding: 20px 0;
font-size: 45px;
font-family: 'segoe ui light';
text-align: center;
}
h2{
font-size: 35px;
padding: 10px 0 20px 20px;
}
figure{
top: 0;
width: 400px;
height: 500px;
padding: 0px 0px 0px 125px;
}
img{
width: 100%;
height: 100%;
}
.section{
padding: 50px 0;
height: 500px;
-webkit-column-count: 2;
-webkit-column-gap:20px;
}
.intro{
font-weight: 1000;
}
.content{
max-height: 250px;
overflow-y: scroll;
overflow-x:hidden;
}

/******************SCROLL BAR***********************/

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    opacity: 0;
    background-color: #d2edda;
    //-border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #0b602f;
}

::selection {
    color: white;
    background: #13DA69;
}
<html>
<head>
<link rel="stylesheet" href="..//css/interview.css">
</head>
<body>
<header></header>
<div class="container">
<h1>INTERVIEW</h1>
<div class="section one">
<h2>Name</h2>
<div class="intro">
<b>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus laboriosam quia, dolores impedit autem consequuntur eaque sed harum adipisci quos voluptas, maxime ducimus nemo id et excepturi temporibus, <br>perspiciatis reprehenderit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem sed aut dolore magni corrupti. Debitis minus officiis magni, laborum! Unde impedit similique delectus voluptatibus necessitatibus a atque, debitis dolores nulla.</b>
</div>
<br>
<br>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
</div>
<figure>
<img src="" alt="insert img here">
</figure>
</div>

</div>
</body>
</html>

A different style of scrollbar is needed for the div compared to the scrollbar for the window

htmlcsscss-selectors

Answer №1

To style scrollbars in CSS, you can use the ::-webkit-scrollbar pseudo-elements on the div element itself like this:

/* This styles any scrollbar. */
::-webkit-scrollbar {
  ...
}

/* This styles any scrollbar which is part of a `div` element. */
div::-webkit-scrollbar {
  ...
}


*{
margin: 0;
padding: 0;
font-family: 'segoe ui light';
}
header{
width: 100%;
height: 300px;
background: #efefef;
}
.container{
width: 90%;
margin: auto;
}
h1{
padding: 20px 0;
font-size: 45px;
font-family: 'segoe ui light';
text-align: center;
}
h2{
font-size: 35px;
padding: 10px 0 20px 20px;
}
figure{
top: 0;
width: 400px;
height: 500px;
padding: 0px 0px 0px 125px;
}
img{
width: 100%;
height: 100%;
}
.section{
padding: 50px 0;
height: 500px;
-webkit-column-count: 2;
-webkit-column-gap:20px;
}
.intro{
font-weight: 1000;
}
.content{
max-height: 250px;
overflow-y: scroll;
overflow-x:hidden;
}

/******************SCROLL BAR***********************/

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    opacity: 0;
    background-color: #d2edda;
    //-border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #0b602f;
}

div::-webkit-scrollbar-track {
    background-color: red;
}

div::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    background: purple;
}

::selection {
    color: white;
    background: #13DA69;
}
<html>
<head>
<link rel="stylesheet" href="..//css/interview.css">
</head>
<body>
<header></header>
<div class="container">
<h1>INTERVIEW</h1>
<div class="section one">
<h2>Name</h2>
<div class="intro">
<b>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus laboriosam quia, dolores impedit autem consequuntur eaque sed harum adipisci quos voluptas, maxime ducimus nemo id et excepturi temporibus, <br>perspiciatis reprehenderit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem sed aut dolore magni corrupti. Debitis minus officiis magni, laborum! Unde impedit similique delectus voluptatibus necessitatibus a atque, debitis dolores nulla.</b>
</div>
<br>
<br>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
</div>
<figure>
<img src="" alt="insert img here">
</figure>
</div>

</div>
</body>
</html>

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

What is the best method to retrieve duplicate fields from a database in HTML5?

this.db.transaction(function (tx) { tx.executeSql('SELECT tsk.*, cont.firstName, cont.lastName ,cont1.firstName, cont1.lastName, list.listId FROM tbl_tasks tsk, tbl_contacts cont,tbl_contactequests cont1, tbl_lists list WHE ...

sqlitehtmlenyo

Adding static files to your HTML page with node.js

This is not a question about using express.static() In my application, I have multiple pages that share the same JS and CSS dependencies. Instead of adding <script> or <link> tags to every single page, I'm looking for a way to include the ...

javascriptphphtmlcssnode.js

Looking for assistance navigating through a website's links using Selenium?

Trying to extract links from this webpage, specifically the ones listed in the footer. An example of what I'm dealing with: The goal is to scrape all links related to securities displayed in a table and then navigate through the footer to access more ...

htmlseleniumweb-scrapingbeautifulsouphref

Visible Overflow Causing Issues

When I shrink my browser window horizontally, my logo disappears, especially in mobile phone view. Check out zanifesto.com for more details. I have tried setting the css to overflow:visible, but it still doesn't solve the issue. My objective is to ...

csswordpressresponsive-design

Challenges faced with Vuetify's vertical and non-linear stepper components

I've been struggling to grasp the concept of Vuetify's stepper feature. Despite my efforts, I haven't been successful in combining different steppers from their page that each have elements I need but lack others. One example is this one on ...

javascripthtmlvue.jsvuetify.js

css - adjust flex box to cover half of the screen and increase its size

I'm having trouble getting my CSS Flex-box to stretch the full height of the right side of the screen from the center. I want it to cover the entire right half of the screen at full height. https://www.cajsoft.co.uk/test/visitor2.html Any help with m ...

htmlcss

Unusual behavior in ReactJS and HTML5 video player observed

I currently have two React presentation components that include HTML5 video tags. The first component, named Homepage, is as follows: export default class Homepage extends React.Component { render() { return( <div className="Homepage"> ...

htmlreactjsvideo

Dynamically injecting a JavaScript script within a Vue.js application

Is there a way to dynamically load a JavaScript script within a Vue.js application? One approach is as follows: <script async v-bind:src="srcUrl"></script> <!--<script async src="https://cse.google.com/cse.js?cx=007968012720720263530:10 ...

javascripthtmlvue.js

Adaptable placement of background across screen widths

I am facing an issue with three buttons that have the same height and width, text, and background icons on the right. On small screens or when there is only a single word in the button, I want to move the icons to the bottom center of the button. Is there ...

htmlcss

Ensure tables are vertically centered when printing an HTML page

I need to export two tables, each measuring 7cm×15cm, to a PDF file with A4 portrait paper size using the browser's "Save to PDF" option in the print tool. My goal is to center these two tables vertically on the A4 paper. If that proves difficult, I ...

htmlcssprinting

Is it possible to enlarge a div using "display: table-cell" property when clicked on?

There are various components displayed on my webpage: I require all components to have a minimum height of 150px. If the height is less than 150px, I want to vertically center their text. In case the height exceeds 150px, I aim to truncate the text at 15 ...

javascripthtmlcss

Utilizing Javascript in Spotfire for enhanced functionality

Currently, I have a dropdown menu with two options ("START" & "END"). Depending on the selected value from this dropdown, I want to display a specific DIV element. I attempted to use the code below, but unfortunately, it is not functioning as expected ...

javascriptjquerypythonhtmlspotfire

Display Checkbox Selections in a Popup Message Box

I've run into a problem while working on an assignment. My goal is to show the checkbox values for toppings in the alert box popup upon submission. However, only the text box and radio values are displaying, while the checkbox returns as blank. Any ...

javascriptjqueryhtmlvalidationcheckbox

How can I validate HTML input elements within a DIV (a visible wizard step) situated within a FORM?

I recently made a decision to develop a wizard form using HTML 5 (specifically ASP.NET MVC). Below is the structure of my HTML form: @using (Html.BeginForm()) { <div class="wizard-step"> <input type="text" name="firstname" placeholder ...

javascriptjqueryhtmlasp.net-mvc-4wizard

occupying half of the screen

Having trouble displaying two videos in an ionic grid. My goal is to have both videos take up the entire screen, with each occupying 50% height and 100% width. However, when I try to achieve this, the ion-row only takes up 50% of the screen and the video i ...

htmlcssionic-frameworkhtml5-video

Display upon hovering, conceal with a button located within a popup container

There seems to be an issue with the code below. Even though it works perfectly in jsfiddle, it breaks in my Chrome and other browsers right after displaying the ".popup" div. Can anyone point out what I might be doing wrong? I found similar code on this si ...

javascriptjqueryhtmlcssjquery-hover

There is a significant spacing issue between the header and main category when viewed on a mobile device

Experiencing issues with element distances on different screen sizes? While the website looks fine on normal screens, there's a noticeable gap between the header and main sections on mobile devices. See below for the provided HTML and CSS code. ...

htmlcssbootstrap-4

Using Java script to parse and interpret a JSON file

I have a JSON file that follows this structure. Being new to JavaScript, I am looking for guidance on how to extract each key and its associated value. Can someone help me understand where to begin? AuthServer.Web": { "stuff": { "evenmore st ...

javascripthtmljson

preserving the current state even after refreshing the page

Currently, I am teaching myself React. When I click on the favorites button, which is represented by a heart symbol, it changes color. However, upon refreshing the page, the color change disappears. To address this issue, I came across the following helpfu ...

javascripthtmlreactjsreduxmaterial-ui

Variations in CSS display across various browsers

I'm currently facing an issue while learning web development. The expected result only appears when I preview my website on an old version of Internet Explorer, but it doesn't show up correctly when opened on Firefox or Chrome. The code I have i ...

htmlcss