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

"After clicking the button for the second time, the jQuery on-click function begins functioning properly

(Snippet: http://jsfiddle.net/qdP3j/) Looking at this HTML structure: <div id="addContactList"></div> There's an AJAX call that updates its content like so: <div id="<%= data[i].id %>"> <img src="<%= picture %&g ...

javascriptjqueryhtml

Position the background in CSS according to the class name

There are a total of 8 icons, with 4 in blue and 4 in grey. Therefore, product 1 has both a blue icon and a grey icon. When the user has product 1, they will see the blue icon (with an added class on the container called .gotProduct), and when they don&ap ...

jqueryhtmlcss

Is there a way to access the value of a variable within a loop inside a function and store it in a global variable?

I am struggling to retrieve the value of a variable after it has passed through a loop. I attempted to make it a global variable, but its value remains unchanged. Is there any way to achieve this? Below is my code snippet where I am attempting to access t ...

htmlfunctionvariablesjavascript

What is the best way to showcase HTML content in columns with a horizontal scrolling feature?

I am trying to showcase a list of basic HTML elements such as divs, paragraphs, etc. within a fixed height container, arranged in columns with consistent width. I want them to be horizontally scrollable, similar to the layout displayed in this image. Thi ...

csshtmlscrollinternet-explorer-11

The tab component is failing to load due to an issue with the Bootstrap tab

I've created a page displaying different locations with two tabs - one for Google Maps and another for weather. For example, take a look at this location: The issue I'm facing is that when switching between the tabs, they don't load fully. ...

javascriptjqueryhtmlcsstwitter-bootstrap

The rounding of my image is uneven across all sides

I'm attempting to give my image rounded borders using border-radius, but I'm unsure if the overflow property is affecting the image. Image 1 shows my current image, while Image 2 depicts what I am trying to achieve. I am utilizing React, HTML, no ...

htmlcssnode.jsreactjs

flexbox layout with a fixed sidebar that stays in place

Is there a way to make the sidebars in the holy grail layout sticky using flexbox? Specifically, I want the aside and nav sections of the HTML to stop scrolling down further once the last element is reached. I've tried various methods but with limited ...

cssflexbox

How can I change the transparency of a CSS background color using JavaScript?

I have a question about CSS: .class1 { background: #fff } Now, I need to achieve the following: .class2 { background: rgba(255,0,0,0.5) }; Is there a way to use JavaScript only to change the background property of .class1 and give it an opacity of 0.5? ...

javascriptcss

utilize a modal button in Angular to showcase images

I am working on a project where I want to display images upon clicking a button. How can I set up the openModal() method to achieve this functionality? The images will be fetched from the assets directory and will change depending on the choice made (B1, ...

htmlangulartypescriptmodal-dialogassets

App script: Extracting HTML form data from a web application

I have been trying to work on a script that involves taking input from an HTML form and processing that data in order to populate a Google Sheet. Unfortunately, I haven't had much success with it so far. Here is the code I have been working on: Index ...

htmlformsgoogle-apps-scriptgoogle-sheetsweb-applications

Display issues with React styled components preventing proper rendering on the screen

Having issues with my style components displaying in a web application I'm developing using React and Ruby on Rails. Everything was working fine until I added a third style component, now even after removing it, nothing shows up on the screen after ru ...

cssruby-on-railsreactjsweb-applicationsstyled-components

What happens when there is no match found while attempting to edit a form with the UI-Bootstrap typeahead directive?

Here is the code that demonstrates how my typeahead input box functions. Users can enter a name, and the relevant information will populate the rest of the form. If no match is found, users should still be able to input the name and related details into th ...

javascripthtmlangularjsangular-ui-bootstrap

What steps do I need to follow to create a 3D shooting game using HTML5 Canvas?

I'm eager to create a 3D shooter game with HTML5 Canvas, focusing solely on shooting mechanics without any movement. Can anyone provide guidance on how to accomplish this? I've looked for tutorials online, but haven't come across any that m ...

javascripthtmlcanvas

I'm curious as to why the web browser is showing a timestamp below the image I have on my HTML page

Issue at Hand: I am currently working on coding a website that involves displaying an image. However, when the image is loaded, a timestamp appears underneath it in the web browser. Query: Could you please shed some light on why a timestamp is showing up ...

html

When reducing the page size, the Bootstrap columns are colliding with

While resizing the screen, I noticed that these images are overlapping each other. I haven't made any changes to the css for container-fluid or row. <div class="container-fluid bg-grey"> <div class="row center"> <div class= ...

htmlcsstwitter-bootstrap

Utilize a dynamic carousel with interactive lightbox functionality to display a stylish div containing captivating background

Is it possible to add a slick lightbox to a slider that only contains a div with a background image, but the lightbox doesn't display the image? What are your thoughts? $('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, ar ...

jqueryhtmlcss

Tips for creating a multi-line text field with ellipsis using a div in CSS

Similar Question: How to Insert Ellipsis in HTML Tag for Content that is Too Wide Using CSS to Display “…” on Overflowing Multiline Blocks Hello, I am attempting to create a div tag to present a question. The size of this div bo ...

csshtmltextellipsis

Develop a container element with protective measures against external CSS styles impacting internal elements

As I work on integrating my webpage code into a large project, I have encountered an issue. The entire project code is contained within a div element inside the <main> tag. However, when I add this container div within the <main> tag, the pro ...

htmlcss

Reset all divs to their default state except for the one that is currently active using jQuery

Here's the plan for my script: Once a user clicks on a "learn more" button, it will reveal the relevant information in the corresponding box. I'm aiming to implement a feature where if you click on another "learn more" button while one box is a ...

javascriptjquerycsscss-selectors

Issue with menu display on Internet Explorer

Having some trouble with IE. My menu displays fine in Firefox and Chrome, but IE is causing issues... It seems that IE isn't rendering the <li> tag properly, so my dropdown menu isn't functioning in IE. Can anyone assist me? Here's t ...

phphtmlcss