How can the horizontal scroll bar width be adjusted? Is it possible to create a custom

Within my div, I have implemented multiple cards that scroll horizontally using the CSS property:

overflow-x: scroll;

This setup results in a horizontal scrollbar appearing under the div, which serves its purpose. However, I would prefer a customized scrollbar that occupies only about 50% to 75% of the div's width.

I have explored various possibilities in CSS and JavaScript to alter the width of a HORIZONTAL scrollbar, but it seems like customization options are limited. If this is indeed the case, I am curious if anyone has any experience developing a custom scrollbar.

One idea that came to mind was to create an input slider with the same number of increments as cards and associate scrolling to each card upon onChange event. Yet, I am uncertain if Window.scrollTo() can effectively handle horizontal scrolling.

javascriptcssreactjs

Answer №1

@alex

A great feature of webkit is the ability to customize the height and width of your ScrollBar.

::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

For more information, check out this helpful link:

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

MUI Gradient Tracked Button

Take a look at this Codepen example I created. It showcases a hover effect where the gradient follows the mouse cursor. In order to achieve this effect, I have defined two CSS variables - --x and --y, to keep track of the mouse position on the button. The ...

javascriptcssreactjstypescriptmaterial-ui

What could be causing the issue with the conditional validation in my zod and react-hook-form integration?

Hello there! I recently refactored my code and encountered a problem with a conditional field. When the user selects "Yes," an additional field should appear below for them to fill out. However, the issue I'm facing is that when "Yes" is selected, the ...

reactjstypescriptnext.jsreact-hook-formzod

What are some strategies for maintaining a responsive layout with or without a sidebar?

I've made the decision to incorporate a sidebar on the left side of all pages across my website. This sidebar must have the ability to be either hidden or shown, without overlapping the existing content on the page. However, I'm encountering an ...

htmlcss

Is there a way to decrease these values in my firestore using a loop?

My goal was to decrease the quantities of the color upon form submission. The setup includes forms where users can select a product, enter quantity, choose colors, and add more products. Upon submitting the data, it looks like this: The Firestore documen ...

javascriptreactjsfirebasegoogle-cloud-firestore

Customizing the layout of a Bootstrap carousel by adding HR lines both above and

I have set up a bootstrap carousel to showcase numerous images, with the carousel indicators serving as image icons. I am looking to add horizontal lines above and below these icons. How can I achieve this? Currently, the icons functioning as carousel ind ...

htmlcsstwitter-bootstrapbootstrap-4

A guide on aligning a CSS item perfectly in the center using absolute positioning

I have been searching for a solution to my problem, but all I found were answers that addressed similar issues in a slightly different way. My challenge involves placing multiple smaller images on top of a larger background image. To achieve this, I utili ...

htmlcsscss-position

Getting the Request Body Content in Express Middleware

Currently, I am in the process of developing a small API logger to use as an Express middleware. This logger is designed to gather data from both the request and response objects, then store this information in a JSON file on disk for later reference. Her ...

javascriptnode.jsexpressmiddleware

Node.js async.each triggers the error message "Callback has already been invoked"

I seem to be facing a problem that I can't pinpoint despite searching for mistakes extensively. The issue arises when async.each throws a "Callback was already called" error. Below is the code snippet where I encounter this problem: async.each(this. ...

javascriptnode.jsasynchronouscallback

Issues with Converting JSON to HTML Table using JavaScript

Issues with Converting JSON to HTML Table Using JavaScript I've been trying to create a function that will display the contents of a JSON file in an HTML table. However, I keep getting an undefined error. Despite being able to see the data displayed ...

javascriptjqueryhtmljson

Implementing an unordered list in an inline format, even when it is collapsed with Bootstrap

Recently, I've been delving into Bootstrap and experimenting with coding a basic website. Below is the code for the navbar: <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class ...

htmlcsstwitter-bootstrapnavbar

Errors in Chartist.js Data Types

I am currently using the Chartist library to monitor various metrics for a website, but I have encountered some challenges with the plotting process. The main errors that are appearing include: TypeError: a.series.map is not a function TypeError: d.normal ...

javascriptnode.jspugchartist.js

Tips for avoiding validation errors from useEffect during page loading

const Login = () => { const [errors, setErrors] = useState({}) var newErrors = {} const formValidation = () => { if (name === "") { newErrors.name = Please enter a name } if (email === "") { newErrors.email = <h1 className ...

reactjsvalidationreact-hooksuse-effect

I am getting an error message that reads "react-router is unable to find the module

I am currently in the process of creating a new React project and I seem to be facing a dependency issue between react-router and history: ERROR in ./~/react-router/lib/match.js Module not found: Error: Cannot resolve module 'history/lib/Actions&apos ...

node.jsreactjsnpmreact-router

Encountering the "Cannot Retrieve" error in express.js while navigating to the ID of an object

I'm in the process of developing a blog web app that allows users to create articles. Once a user clicks on 'new article', they will be taken to a page with a 'post article' button. This button triggers a post request linked to my ...

javascriptnode.jsexpressbackend

Guide on fetching data from a database using Node Js in a hierarchical structure

I am currently developing a NodeJs backend code to retrieve data from the database. The desired structure of the data should look like this: data = [{ name: "Admin", id: '1', children: [ { name: "Admin", id: "1& ...

javascriptnode.jsalgorithmmongoose

Setting up KCFinder integration in TinyMCE

I am utilizing TinyMCE as a text field, and I am in need of enabling image upload functionality within it. To achieve this, I am using KCFinder. However, I am encountering an issue where upon clicking on the 'Upload Images' button, only a white b ...

javascriptangularjsfile-uploadtinymcekcfinder

Exploring the capabilities of the Next.js framework with the powerful Advanced Custom Fields Repeater

Having trouble implementing an ACF repeater field in my Next.js project. I have a block with a repeater field containing sub fields, and although I can retrieve the data, I'm unsure how to iterate through it. Below is a snippet of my JavaScript file: ...

reactjswordpressnext.jsadvanced-custom-fields

Utilizing CSS3 Animation for enhanced hover effects

I have a setup with two divs. One of the divs expands in height when I hover over it. What I'm trying to achieve is to display text with a fade-in effect somewhere on the screen when I hover over that specific div. Additionally, I want to show another ...

htmlcsshover

I am facing an issue in my Nextjs project where the Array Object is not being properly displayed

Hi there! I am new to Nextjs and currently learning. I recently created a component called TeamCard which takes imgSrc, altText, title, designation, and socialProfile as parameters. However, when attempting to display the socialProfile object array using m ...

javascriptreactjsreact-nativereact-reduxnext.js

Pretty print error: The specified file or directory does not exist

I recently incorporated eslint and prettier into my existing CSR react project, but when I ran 'npm run prettier' I encountered the following errors. How can I resolve this error? Just so you know, there is a src/App.tsx file contrary to the err ...

reactjseslintprettier