How can I modify the appearance of the bootstrap scrollbar with scrollspy?

I'm struggling to modify the color of the scrollbar in Bootstrap scrollspy despite having a functional scrollbar. Here is an example of my code:

HTML:

<body>
    <div class="container, scrollbar" id="myScrollspy">
        <div class="panel-group" id="accordion">

    ...

CSS:

.scrollbar::-webkit-scrollbar-track
{
    border-radius: 10px;
    background-color: #F5F5F5;
}

.scrollbar::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: #D62929;
}

Despite these CSS modifications, the color of the bar doesn't change. Could it be due to how bootstrap styles handle scrollbars differently?

javascripthtmlcssbootstrap-4

Answer №1

If you are looking to customize the color of your scrollbar thumb, this code snippet will come in handy. For more clarity, provide a sample code or screenshot for reference.

/* Scrollbar width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track color */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Thumb color */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Hover effect on thumb */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

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 method to extract a value from the $emit payload using Vue.js?

I have a situation where I am sending an event with different values from my ConversationList component (child) to the ConversationModel component (parent). Conversation List getConversation(conversation_id, receiver_id, username, avatar){ this.$emit(& ...

javascriptvue.jsvuejs2vue-component

Using Vue to iterate through elements

I am struggling to loop through an array in a Vue component without duplicating the element specified in the 'v-for' directive. I have consulted the official Vue.js API documentation, as well as various online articles, but haven't found a s ...

javascriptvue.jsvuejs2vue-component

Utilizing Selenium to Extract Data from ESPN Website

I am currently working on a project that involves scraping data from ESPN, performing calculations on the scraped data, and then iterating through a dataframe to process player information. While I have successfully completed this task for one player, I am ...

pythoncssselenium

Type of Angular Service Issue: string or null

I'm encountering a persistent issue with my Angular code, specifically while calling services in my application built on Angular 13. The problem arises when trying to access the user API from the backend, leading to recurrent errors. Despite extensive ...

javascriptjsonangularapirest

Ensuring the validity of input tags

I encountered an issue with an input tag that has a specific logic: https://codepen.io/ion-ciorba/pen/MWVWpmR In this case, I have a minimum value retrieved from the database (400), and while the logic is sound, the user experience with the component lea ...

javascripthtmljquerycss

Full replacement of a cell within an HTML table

I have a scenario like the following: <table id="myTable"> <tr> <td class="1">cell 1</td> <td class="2">cell 2</td> </tr> <tr> <td class="3">cell 3</td> &l ...

javascripthtml

I am looking to incorporate an OVG video onto my website

I have a video in OVG format that I want to add to my website. Since I am not very familiar with this file type, I'm concerned about how it will perform across different web browsers. I know that Firefox can play the file, but I'm unsure about In ...

htmlvideoogg

Using @extend with numeric classes in Bootstrap 5: A step-by-step guide

I am looking to migrate some classes from Bootstrap 4 to 5 because some of the Bootstrap classes are no longer usable, especially in utilities. I am using SASS so I can utilize @extend for this process. https://i.sstatic.net/dEDCw.png For classes .text-l ...

csstwitter-bootstrapbootstrap-4sassbootstrap-5

The subsequent code still running even with the implementation of async/await

I'm currently facing an issue with a function that needs to resolve a promise before moving on to the next lines of code. Here is what I expect: START promise resolved line1 line2 line3 etc ... However, the problem I'm encountering is that all t ...

javascripttypescriptasynchronousasync-awaitreadline

Using V-model binding in Vue always resets the content of text inputs

I am facing an issue with a Text Input that is filled based on a string stored in cookies, similar to a Remember me feature. When I bind the value of the input to the cookie using :value, I am unable to type a new value even if there is no cookie being sto ...

javascriptvue.jsvuejs3

Functional Components with Methods in ReactJS

When creating a functional stateless component that requires methods to access props, is there a recommended approach or best practice to follow? For instance: function Stateless(props) { function doSomething(props) { console.log(props); } ...

javascriptreactjs

Troubleshooting problem with MongoDB queries within a for loop

I have an array of user emails obtained from the post data. My goal is to find the _id associated with each email. Here's the for loop I attempted: var studentIds = []; for (var i = studentEmails.length - 1; i >= 0; i--) { var email = studentEm ...

javascriptmongodbexpress

iisnode ran into a problem while handling the request. Error code: 0x6d HTTP status code: 500 HTTP subStatus code: 1013

Currently, I am working on a web application using ReactJS for the frontend and Express for the backend. My deployment platform is Azure. In order to verify that my requests are being processed correctly, I decided to conduct two API tests. The first tes ...

javascriptnode.jsreactjsazureexpress

What sets apart .addEventListener and .on() when it comes to including an event in Bootstrap 5?

I'm currently attempting to attach a listener to my modal in order to implement a certain behavior each time the modal is opened. As per the guidance from Bootstrap 5 documentation, you can achieve this by using: https://getbootstrap.com/docs/5.2/com ...

javascriptjquerybootstrap-modalbootstrap-5

io.emit is unable to send messages to all connected clients

Struggling to implement a feature in a socket.io game where players can leave the game, I'm facing an issue with io.emit only notifying the departing player. Here's the snippet from my socket.js: io.on("connection", sock => { sock.on(&ap ...

javascriptnode.jsreactjssocket.iomobx-react

Develop your own personalized Angular schematics that produces a file that begins with an underscore

Having trouble with custom Angular schematics file naming. I'm trying to create a theme SCSS file that starts with an underscore followed by a double underscore as a delimiter. For instance, I want the file name to be _mouse-theme.scss, using the nam ...

javascriptangulartypescriptsassangular-schematics

What is the best way to repurpose the vuex module for multiple components?

Currently, I am tackling the pagination aspect of a project that involves handling a large amount of data. My initial instinct was to store this data within Vuex. However, I ended up implementing all the logic in the Vuex store module. Now, my goal is to f ...

javascriptvue.jsvuejs2vuex

What could be causing this code to fail in making changes to the HTML document?

I tried incorporating the following code into my website: $('.feed-item').append('<p> This is paragraph element. </p>'); You can view it on this page: Test Unfortunately, the code does not seem to be functioning properly. ...

javascriptjqueryhtmlwordpress

The issue with mapDispathToProps is that it is failing to assign a function

import React, { Component } from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; import { ShelfModal } from "./shelf-modal"; import { openShelfModal } from "../../../redux/actions/shelf-modal"; export class ShelfTest ex ...

javascriptreactjsreduxreact-redux

Continuously make Ajax requests to populate numerous div elements

There are two div elements present on my webpage. <div id="1"></div> <div id="2"></div> I am attempting to dynamically populate these divs using the following php call. <script> var queries = ["SELECT * from table1", "S ...

javascriptphpjqueryhtmlajax