Is there a way to customize the scrollbar color based on the user's preference?

Instead of hardcoding the scrollbar color to red, I want to change it based on a color variable provided by the user.

I believe there are two possible solutions to this issue:

  1. Is it possible to assign a variable to line 15 instead of a specific color like red?

Alternatively,

  1. If I handle the scrollbar as a div element, I can change the scrollbar color in the ts file. But how can I target the scrollbar in the DOM?

Thank you.

htmlcsstypescriptvue.jssass

Answer №1

There is a simple way to achieve this effect. Add a color input element in your HTML and set the background color of the scrollbar to match its value.

var colorInput = document.getElementById("color-input");
var root = document.querySelector(":root");

colorInput.onchange = function() {

  root.style.setProperty("--scrollbar-color", colorInput.value);

}
:root {

  --scrollbar-color: rgb(255, 0, 0); /* red */

}
div {

  margin: 10px;
  border: 1px solid black;
  padding: 10px;
  height: 100px;
  overflow-y: scroll;

}

::-webkit-scrollbar {

  -webkit-appearance: none;
  width: 15px;
  background-color: lightgrey;

}

::-webkit-scrollbar-thumb {

  background-color: var(--scrollbar-color);

}
<input type="color" id="color-input">
<div>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
</div>

Now, when the user selects a color, it will be applied to the scrollbar. Give it a try by using the run code snippet button

Edit :-

Based on your comment, here's how you can specifically implement this with a simple change

Check out the edited code below.

var colorInput = document.getElementById("color-input");
var element = document.getElementById("el");

colorInput.onchange = function() {

  el.style.setProperty("--scrollbar-color", colorInput.value);

}
#el {

  --scrollbar-color : rgb(255, 0, 0) /* red */
  margin: 10px;
  border: 1px solid black;
  padding: 10px;
  height: 100px;
  overflow-y: scroll;

}

#el::-webkit-scrollbar {

  -webkit-appearance: none;
  width: 15px;
  background-color: lightgrey;

}

#el::-webkit-scrollbar-thumb {

  background-color: var(--scrollbar-color);

}
<input type="color" id="color-input">
<div id="el">
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
</div>

Answer №2

When styling with CSS

--scrollbarBG: red;
--thumbBG: blue;

body::-webkit-scrollbar {
  width: 11px;
}
body {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}

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

Tips for capturing a broadcasted signal

Currently, I am utilizing Vue3 with the option API. In my code snippet below, specifically in toggle-1.vue, I am emitting an event called onClsDigitizePolygonInteractionInstanceInit. I am interested in understanding how to then listen for or receive this e ...

vue.jsvuejs3vue-component

Creating a unique Nest.js custom decorator to extract parameters directly from the request object

I am working with a custom decorator called Param, where I have a console.log that runs once. How can I modify it to return a fresh value of id on each request similar to what is done in nestjs? @Get('/:id') async findUser ( @Param() id: stri ...

javascriptnode.jstypescriptnestjsreflect-metadata

Pass the constant declared in onMounted function to the context

I am currently in a situation where I need to initiate an API call, but it should only be triggered once the component has been mounted. Here's what I have so far: onMounted(async() => { const { data, refresh, pending, ...

vue.jsnuxt.jsvuejs3vue-composition-api

Encountering an error: "Unable to assign the 'id' property to an undefined object while attempting to retrieve it"

I'm running into an issue while attempting to retrieve a specific user from Firebase's Firestore. export class TaskService { tasksCollection: AngularFirestoreCollection<Task>; taskDoc: AngularFirestoreDocument<Task>; tasks: Obs ...

javascriptangulartypescriptfirebase

JavaScript - Unable to unselect a button without triggering a page refresh

I have a series of buttons in a row that I can select individually. However, I only want to be able to choose one button at a time. Every time I deselect the previously selected button, it causes the page to reload when all I really want is for all the but ...

javascripthtmlcss

Having trouble locating the search bar element on Walmart's website?

I'm currently working on a bot that needs Selenium to interact with the search bar on Walmart's website, where it will input the name of a specific product and perform a search. However, I've encountered an issue where no matter what method ...

javascriptpythonhtmlseleniumweb-scraping

Error occurred when attempting to link user services with report controller

Greetings, I am currently working on a Nest Js mini project that consists of two separate modules: reports and users. Each module has its own Service, controller, and repositories. The reports module has a many-to-one relation with the users module. My g ...

node.jstypescriptexpressnestjstypeorm

Encountering an issue on Safari: WeakMap variable not found in .NET Core 1.1.0 and Angular 2 application

I recently deployed a .NET Core 1.1.0 + Angular 2 + Typescript app on ASPHostPortal and encountered an issue while accessing it from Safari. The console showed the following exception: Can't find variable:WeakMap This caused the site to not load p ...

angulartypescriptpolyfills

A tutorial on how to create the appearance of disabled buttons that look the same as enabled buttons through the use

My button includes a text field that is constantly disabled. I would like for the text field to appear as bright as it does when the button is enabled. After disabling the button, they both appear dimmer compared to others and the text field follows suit ...

javascriptjqueryhtmldom

Issues with the Web Share API navigator.share feature arise when users choose to cancel the share dialog on both IOS

Encountering a surprise error when utilizing MOBILE SHARE (navigator.share) that appears after cancelling the share flow. Although users can acknowledge the message and proceed, this unexpected error response occurs. STEPS TO REPLICATE 1. Tap the SHARE i ...

androidiosvue.js

Adjusting the StrokeWidth in pixels/em units on fabricjs

When adding a rectangle or circle to the canvas and adjusting the strokeWidth using a range input, how can we determine the value of strokeWidth in pixels, em, or percent? For instance, if we set strokeWidth to 5 within a range of 1-10, how much does the a ...

javascripthtmlvue.jsfabricjs

Retrieve the innerHTML contents from all span elements

I'm having trouble getting the content of all span tags that are child elements of div#parent. So far, I've only been able to retrieve the content of the first one. Can someone please assist me with this? $( document ).ready(function() { ...

javascriptjqueryhtml

Add a preventDefault event listener to a submit button that triggers a specific function

$(function() { $('#login').submit(function(e){ preventSubmission(); e.preventDefault(); }); }); function preventSubmission() { $('#btnLogin').attr('disabled','disabled'); $("#btnLogi ...

javascriptjqueryhtml

Can anyone help me get my carousel to work properly?

I am facing a carousel problem in my personal exercise project. I have gathered HTML, CSS, and JavaScript from the internet and am attempting to integrate them all together. //Sidebar script start $(document).ready(function () { var trigger = $(&apo ...

javascripthtmljquerycsscodeigniter-3

Steps for inserting a button to navigate to a currently active tab in primevue

<template> <div> <Button @click="jumpToActiveTab">Go to Active Tab</Button> <TabView :scrollable="true" previousIcon: { class: 'text-indigo-900 w-8'}> <TabPanel v-for="(it ...

vue.jsvuejs3primevue

Viewing at full width on mobile exceeds 100% [React]

I'm attempting to make a div cover exactly 100% of the width on mobile devices, but no more. The code I'm using is as follows: Here is my React code: <div className="max-width-100vw"> HELLO I AM A UNIQUE SENTENCE HERE??? </div> And ...

htmlcssreactjsmobile

Using XSLT to convert HTML into the desired text format

It has been almost two decades since my last encounter with XSLT. I am attempting to transform documents, like the HTML snippet below, into the desired output. <p> おばあさんは、とても <ruby><rb>喜</rb><rp>(</rp ...

htmlxmlxslt

What causes the significant difference in website speed between Internet Explorer and Firefox?

While operating an asp.net website, I have noticed that one specific page is running significantly slower in Internet Explorer compared to other pages. Interestingly, this same page performs well in Firefox. Does anyone have insight into why this discrep ...

html

Dragging a div element within a table

I am working on an HTML code where I need to make the colored divs draggable and fit them into specific table cells. The green div should occupy 2 cell spaces, light blue 3 cell spaces, yellow 4 cell spaces, and dark blue 5 cell spaces. While I have the d ...

javascriptjqueryhtmlcssjquery-ui

Avoid repetitive clicking of the button to activate the function

Is there a way to prevent spamming of a button when calling a function? I want the user to only be able to call the function once every second when clicking the button. I have tried using setTimeout but it doesn't seem to work, as it still allows for ...

jqueryhtml