What are some ways to personalize a scrollbar?

I am looking to customize the scrollbar within a div. I attempted to modify it using the code below, but I encountered difficulties when trying to change the scroll buttons and did not achieve my desired outcome. Additionally, this customization did not work in the Mozilla Firefox browser.

What I am aiming for:

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

            ::-webkit-scrollbar-track {
                background: #888;
            }

            ::-webkit-scrollbar-thumb {
                background: #888;
            }

            ::-webkit-scrollbar-thumb:hover {
                background: #555;
            }
<p>.</p>
            <p>.</p>
            <p>.</p>
            <!-- more code follows -->
javascripthtmlcss

Answer №1

Firefox has introduced partial support for custom scrollbars in version 64.

.your-div-selector {
    scrollbar-color: #0a4c95 #c2d2e4; /* Track color and thumb color */
}

If you desire a consistent style similar to your design, I would suggest exploring third-party JavaScript solutions like (there are plenty available).

Answer №2

To customize the scrollbar of a specific div, you first need to assign a class or id to that div and then apply CSS styling accordingly:

#specific-div-id::-webkit-scrollbar {
    width: 3px;
}

#specific-div-id::-webkit-scrollbar-track {
    background: #888;
}

#specific-div-id::-webkit-scrollbar-thumb {
    background: #888;
}

#specific-div-id::-webkit-scrollbar-thumb:hover {
    background: #555;
}

Answer №3

If you're looking to tweak some code with CSS, here's a snippet to get you started. Simply adjust the color and image in ::-webkit-scrollbar-thumb and maybe play around with the positioning as well.

 .container {
      margin: 40px auto;
      width: 1000px;
      height: 200px;
      overflow-y: scroll;
    }
    .container::-webkit-scrollbar {
      width: 20px;
    }
    .container::-webkit-scrollbar-track {
      background: tomato;
      border-left: 9px solid white;
      border-right: 9px solid white;
    }
    ::-webkit-scrollbar-thumb {
        background-image:url( http://i.imgur.com/ygGobeC.png);
    }
    .container .item {
      height: 20px;
      margin-bottom: 5px;
      background: silver;
    }
    .container .item:last-child {
      margin-bottom: 0;
    } 
    .container {
        direction:rtl;
      }
 <div class="container">
        <div class="item"></div>

        <!-- repeat this div for the desired number of times -->

    </div>

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

Substituting JSON objects with alphabets

When running this code, the expected output will display the name and the choices. To clarify, I aim to substitute the values of Not effective, Neither effective nor Effective, Effective with "A", "B", and "C", respectively. ...

javascriptvue.jsreplace

Implement the color codes specified in the AngularJS file into the SASS file

Once the user logs in, I retrieve a color code that is stored in localstorage and use it throughout the application. However, the challenge lies in replacing this color code in the SASS file. $Primary-color:#491e6a; $Secondary-color:#e5673a; $button-color ...

javascriptcssangularjssass

Capturing screenshots with Selenium in Node.js is proving to be quite sluggish

My current project involves using Selenium with Mocha in Node.js for UI testing on a website. I want to capture screenshots after each test to review and share the results visually. The challenge arises when there are AJAX calls and JavaScript animations ...

javascriptnode.jsseleniummocha.jsscreenshot

Monitoring variables in different AngularJS controllers

I have a component named histogram demo which includes a distinct controller with a variable known as $scope.selectedElements. I aim to monitor this variable in the primary appCtrl controller. How can I achieve access to this variable without using $rootSc ...

javascriptangularjsbindingcomponentsangularjs-components

Tips for updating an array in TypeScript with React:

Encountering an issue while updating my state on form submission in TypeScript. I am a newcomer to TS and struggling to resolve the error. enum ServiceTypeEnum { Replace = 'replace product', Fix = 'fix product', } interface IProduc ...

javascriptreactjstypescripttypescript-typingsuse-form

The z-index of 999 in CSS is not functioning as expected on both Google Chrome and Safari browsers

To ensure the slider text is readable in white color, we have applied a black background with 0.65 opacity CSS on the slider image. This allows the white text to stand out effectively. The following CSS code was used for this effect: .zlslides .ms-slide- ...

csswordpressgoogle-chromez-indexopacity

Is NextJS 13 the Key to App Directory On-Demand Revalidation?

I am looking to implement on-demand revalidation with next13 and the app directory. While I have successfully used the app-directory to replace the need for getServerSideProps or getStaticProps, there is one specific page on our site that needs to be rebui ...

javascriptreactjsnext.jsnext.js13stale-while-revalidate

Can someone tell me what comes after my nextElementSibling in this specific scenario?

I am puzzled by the usage of nextElementSibling in this code. Can someone provide an explanation on what exactly it is and where it should be used? Thank you in advance! Also, my code seems to be malfunctioning as I keep receiving an error message that s ...

javascriptfor-loopstylesaddeventlistenersiblings

Alignment problem

In my design, I have a toolbar with flex display and I am trying to center my span element within it. However, I seem to be missing something in the CSS. CSS .toolbar { position: absolute; top: 0; left: 0; right: 0; height: 60px; d ...

cssflexbox

Issue encountered when integrating AJAX with PHP and HTML5 form

I've been working on solving a puzzle involving a contact form that uses AJAX and PHP. I decided to try reverse engineering the PHP code from this page (). However, when testing it out, the message gets stuck at "sending message...." after clicking "S ...

phpajaxhtmlcontact-form

What is the best way to send parameters to an angular service or factory?

This Plunker demonstration is a great visual guide: http://plnkr.co/edit/y3uacaQSc1MbrWKfb0At?p=preview Here's the code snippet for reference: var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope,t ...

javascriptangularjs

What indicators should we look for to decide if JavaScriptExecutor is needed in a Selenium C# project?

Encountering an exception with TestInChrome1 - "OpenQA.Selenium.ElementNotInteractableException: element not interactable". On the other hand, using JavaScriptExecutor in TestInChrome2 resolves the issue. Some key questions arise: What is causing the ...

javascriptc#seleniumselenium-webdriverpage-title

The PHP application encountered an error when trying to use an object of the mysqli_result type as an array

In my section, I have a straightforward display of data sourced from the database. Upon clicking options like construction and selecting countries like Algeria, the displayed values are [251, 211,712]. Similarly, for selections like Power in Egypt, the ou ...

javascriptphpjquerymysqlajax

The specified container does not exist in the DOM: MERN

I am currently working on a project where I aim to develop a Web Application featuring a stock dashboard. During my coding process, I encountered a minor issue that can be seen in this image. My goal is to have a login form displayed on the browser using ...

javascriptnode.jsreactjsnpmmern

Browser comparison: Chrome and Firefox - peculiar ID name causing table width difference without CSS. Suspected AdBlocking interference

There seems to be an issue with a table I have in Chrome. Whenever I change the ID name, it either sets the width to zero or doesn't display at all. You can view it here: http://jsfiddle.net/kdubs/W6GTE/ The specific line causing trouble is: <ta ...

htmlgoogle-chrome

What is the best method for disabling autoscroll for a specific div id when the :target attribute

I created this accordion menu using only html and css, but the buttons are built with the :target id. Is there a way to prevent the automatic scrolling when any button is clicked without using javascript? It currently moves to the anchor #id. I've se ...

javascriptjqueryhtmlcssaccordion

Typescript error: Cannot access property "status" on type "never".ts(2339)

Currently, I have a method that utilizes nextjs/auth to sign in with credentials from a form. However, I am encountering a type checking error Object is possibly 'undefined'.ts(2532) const doStuff = async (values: any) => { const result: S ...

javascriptreactjstypescript

Several conditional statements in JSX

In my JSX Return() code, I am encountering an "If" issue when one of my conditions has 2 different 'onClick' events. There are 2 'a' tags, where one will display button 'X' if a statement is true and the other will display but ...

javascripthtmlreactjsif-statementjsx

Executing jQuery AJAX requests in a chain with interdependent tasks

I am struggling to grasp the concept of magic deferred objects with jQuery. Consider the following code snippet: function callWebService(uri, filter, callback) { var data = {}; if (filter && filter != '') data['$filter&apos ...

javascriptjqueryajaxjquery-deferredchaining

Verify the functionality of a specific method invoked within another method through unit testing

I currently have a method in my Angular application that is triggered upon clicking. Inside this method, I pass a value to another private method. .ts file public onViewItem(item: Results): void { const ids = [item.data['id']]; this.anot ...

javascriptangularunit-testingjasminekarma-jasmine