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

Reset the queue for the slideDown animation using jQuery

I am experiencing an issue with my code where multiple animation effects are running simultaneously. Specifically, when I hover over navbarli1 and then move to another li element with the same navbarli1 class, the slide-down effect is not working as expect ...

jqueryhtmlcssanimation

The lookahead will only find a match if there are brackets present within the string

Trying to use a negative lookahead to search for a particular pattern within a single line string: /\s+(?![^[]*]).+/g Applicable to the following cases: // Case 1 a.casd-234[test='asfd asdf'] abc defg // Case 2 asf.one.two.three four fiv ...

javascriptregex

Personalized style for text overflow property

The application is created using Angular. Within a component, we have a div containing some text: <div>abcdefghijklmnop<div> Depending on the screen size, the text should either be fully displayed or clipped. I discovered the property 'te ...

javascripthtmlcssangulartypescript

Using jQuery, check if the input contains any phrases from the array that are suitable for children

I stumbled upon some code designed for a chat system. My plan is to implement it as a child-friendly global chat, so that I can avoid any blame associated with inappropriate content. The basic premise of the code involves checking user input against an arr ...

javascriptjqueryarraysfilterfiltering

Can we expect React's useState to wait before executing subsequent logic, or will it immediately update the state and trigger a re-render

I have a specific scenario in my code where I am using the useState setter function in React to update a value on line 5. Everything seems to be functioning well without any errors, but I'm curious about something. Since setState updates the state and ...

javascriptreactjsuse-state

Is there a way to choose multiple dropdown items that share the same header?

Utilizing the Fluent UI React Northstar Dropdown component in my React project, I've encountered an issue with multiple item selection. It seems that when there are several items sharing the same header value, only one can be selected at a time. What ...

javascriptreactjsfluent-uifluentui-react

Dealing with the endless looping problem in Next.js caused by useEffect

Looking to implement a preloader that spins while the content is loading and disappears once the loading is complete. However, encountering an issue where the site gets stuck on the loading page and keeps loading infinitely. I've tried multiple soluti ...

reactjstypescriptnext.jstailwind-cssdaisyui

Identifying all Images with JavaScript, Including Asynchronous Ones

Is it possible to use JavaScript to identify all images within a document, even those that are loaded asynchronously (possibly after the DOM is fully loaded)? I am interested in developing a function that can determine if Google Analytics has been loaded ...

javascriptdomimageasynchronousgoogle-analytics

Efficiently styling table Spans with styled components in React

Can anyone help me with a frustrating CSS problem I'm facing? I am trying to render these tags as spans, but they are not separating properly as shown in the image below. They appear stuck together and I can't figure out why. I am using styled co ...

javascriptcssreactjsmaterial-ui

What are the steps to modify or remove a node in react-sortable-tree?

I am currently working on implementing a drag and drop tree view using react-sortable-tree. Along with that, I also need to incorporate CRUD operations within the tree view. So far, I have been successful in adding, editing, and deleting nodes within the p ...

javascriptarraysjsonreactjsfluent-ui

Encountering an "Invalid hook call error" while utilizing my custom library with styled-components

I recently developed my own custom UI tool using the styled-components library, integrating typescript and rollup for efficiency. One of the components I created looks like this: import styled from 'styled-components' export const MyUITest2 = s ...

reactjstypescriptstyled-componentsrollup

No files found in dist/ directory when using Vue.js

Beginner's Note I must confess that I am a novice when it comes to web development. Please bear with me if this question seems silly; I appreciate your assistance in advance. Initial Setup My current node version is 16.15.1 and npm version is 9.5.0 ...

javascriptvue.jsnpmvite

Enhancing MUI components with TypeScript Augmentation for custom props

Currently, I’m working with MUI v5 and attempting to introduce a new prop to the TableRow component. Unfortunately, the MUI documentation on module enhancement doesn’t provide sufficient examples as it only covers adding new variants (rather than new p ...

reactjsmaterial-ui

Obtaining Compiled HTML Output Using AngularJS

I'm running into an issue with obtaining the compiled html of a page in AngularJS. Below is the code snippet that demonstrates this problem: JavaScript: <script src="http://code.angularjs.org/1.2.0rc1/angular.min.js"></script> &l ...

javascriptangularjs

Obtaining the Author's ID on Blogger

Is there a way to extract the author's ID on Google's blogger.com platform? I'm familiar with how to obtain the post ID using data:post.id, but what about the author's ID? ...

htmlcsswordpressblogsblogger

React component will automatically rerender if the cache is disabled in the Chrome browser

In my React application, I am utilizing 'react-image-pan-zoom-rotate' to display images. Visit the GitHub repository here The image I am displaying is sourced from an external service and passed to both libraries for rendering. Lately, I have ...

javascriptnode.jsreactjsgoogle-chromelightbox

Styling multiple Higher Order Components (HoCs) using Material UI withStyles

When developing my application, I encountered an issue with using Higher Order Components (HoCs) and withStyles for styling. If I apply multiple HoCs to one component, the classes prop of the first HoC gets passed to the next one in the compose chain, caus ...

javascriptreactjsmaterial-ui

Quick tips on how to retrieve and showcase API data upon form submission

Struggling with fetching and displaying API data in my Reactjs weather forecast app I've searched extensively but couldn't find a solution to my problem. Can someone provide assistance? //const API; class WeatherApp extends React.Component{ ...

reactjsfetchreact-state

Looking to add some movement to your website? Learn how to make an image track your mouse pointer in a specific section of your webpage

I'm just starting out with web design and javascript, so please be patient. My goal is to have an image follow the mouse pointer only when it's within a specific section of my website. I've managed to make the image track the mouse cursor ...

javascriptjqueryhtmlimagemouseevent

Is there a more effective approach to designing a login screen?

I am just starting out with angular js and this login page is my first step. I have created a basic login form, but when I click on the login() button, the form() does not get submitted and it keeps showing an error message saying "invalid username and pas ...

javascriptangularjs