Universal CSS styling for scrollbar design across platforms

I'm feeling extremely frustrated right now because I can't seem to create a basic scroll bar with a specific color and thickness that will display properly on various web browsers and smartphones.

Are there any resources available to help me figure this out?

One of my main issues is that the horizontal scroll bar appears too thin on my Android phone, and I want it to have the same thickness and color on all smartphones.

Here's an example of what I'm dealing with:

<div class="chartWrapper">
    <div class="chartAreaWrapper scroll-color-colors" id="chartAreaWrapper">
        <div style="width:1000px; height 450px">
            scrollable content
        </div>
    </div>
</div>

CSS code:

@media (max-width: 1600px) {
.chartWrapper {
    position: relative;
    height: 430px;
}

.chart {
    width: 700px;
    left: 0;
    top: 0;
}

.chartAreaWrapper {
    max-width: 1100px;
    height: 420px;
    overflow-x: scroll; 
    overflow-y: hidden;
    overflow: scroll;  
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #f5f5f5;
}

::-webkit-scrollbar {
    background-color: #f5f5f5;
    cursor: pointer;
    width:40px; /*This Works*/
}

::-webkit-scrollbar-thumb:horizontal {
    background-color: #a7cb11;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    height: 20px; /*This do not work*/
}

.scroll-color-colors {
    scrollbar-color: #a7cb11 white;
}

}

JSFiddle

Answer №1

Make sure to include the height property in this section of the code:

::-webkit-scrollbar {
  background-color: #f5f5f5;
  cursor: pointer;
  width:40px; /*This is effective*/
  height: 20px; /*This should work*/

}

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

Is there a way to utilize the passValue function twice within Javascript?

Is there a way to display the value of an input field in multiple spots throughout the code? Currently, my code only passes it once. How can I rewrite it to show up again later in the code? //HTML: <input type="text" name="amount" onchange="passValue ...

Is transforming lengthy code into a function the way to go?

I have successfully implemented this code on my page without any errors, but I am wondering if there is a more concise way to achieve the same result. Currently, there is a lot of repeated code with only minor changes in class names. Is it possible to sh ...

Adjust the height of the dropdown list in react-select (React Material UI)

I recently added a dropdown feature using react-select to my project. However, I encountered an issue where the dropdown list was initially too large and taking up the entire page. I am looking for a solution on how to style the react-select dropdown list ...

`Customizing Switch Colors on Bootstrap: A Guide`

https://i.sstatic.net/alsdy.png I obtained the code from Get Bootstrap. <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked> & ...

How can I adjust the vertical position of Material-UI Popper element using the popper.js library?

https://i.stack.imgur.com/ZUYa4.png Utilizing a material-ui (v 4.9.5) Popper for a pop-out menu similar to the one shown above has been my recent project. The anchorElement is set as the chosen ListItem on the left side. My goal is to have the Popper alig ...

Customize cell options in a dynamic grid within a dojo environment

When I double click on a cell in a data grid, I want to display a dropdown with information from a dojo store. However, the code I am using is not working as intended. I need to show clinician IDs stored in "clinStore" in the 'clinicianId' field ...

Parsing a Table in Python with HTMLParser

I am trying to convert an HTML table into a 2D array (rows and columns) using only the HTMLParser library in Python, without relying on BeautifulSoup or other non-standard libraries. This task is part of a personal project that I am working on for fun :) ...

What is the best way to vertically center elements within a navigation bar?

I'm currently working on a React application and I am trying to create a navigation bar. However, I am encountering some difficulties with aligning the elements in the middle of the nav bar layout. You can see the issue depicted in the image at this l ...

Using the position property of relative on a DIV element causes a gap to appear between the DIV and the next

Two div elements are placed consecutively. When I move the first div using position: relative and top: -60px, it creates a gap between them. Take a look at this example here: https://codepen.io/dusannis/pen/oNgBpoK If you notice, there is a noticeable ga ...

Scrollable Turbo Table experiencing a problem with the PrimeNG filter dropdown

When using PrimeNG Turbo Table, I am facing an issue where the filter dropdown is getting placed inside the scrollable table. The dropdown works perfectly fine without the scrollable table. You can see it in action here. However, when the table is scroll ...

Placing toast notifications on top of dialog modals

When trying to combine a DaisyUI modal (a TailwindCSS UI library) with a toast alert library from GitHub, I'm facing an issue where the global toast alerts are not appearing above the modal dialog. Despite experimenting with various CSS options using ...

Is it necessary to capitalize the first letter only when it's not at the beginning of a sentence?

To separate a lengthy string, I followed the approach outlined in this post: .line { display: inline-block; } <p> <span class="line">This text should break</span> <span class="line">after the word "break"</span> </ ...

The image must be able to fit within the div container without distorting its proportions

Recently, I created a slider that functions flawlessly. However, I am struggling to make the image fit inside the div without distorting its proportions. I've tried various methods but haven't been able to achieve the desired result. Could you p ...

Removing the blue border around a button upon being clicked

Whenever I press my button, an unexpected event occurs. Is there a solution to avoid this issue? Thank you for your help! :) ...

Prevent webpage from resizing when window dimensions change

Whenever I resize my webpage window, the elements start to pile on top of each other and it looks disorganized. For example, when I reduce the window size, YouTube just cuts off everything instead of stacking the images. How can I achieve a similar effec ...

HTML list style with varying images at the same level in a ul tag

I am working on an Application that generates output with li tags. I am trying to find a way to apply different list-style-image for each li tag of the same level within the ul, while keeping the HTML code as simple as possible. Each li with a class of gre ...

How do you efficiently include several elements within a single column in Boostrap 5?

I've been working with Bootstrap 5 to display a grid of images similar to this link, but the images are not displaying as intended due to some CSS code. #projects img { width: 100%; height: 100%; } <section id="projects"> ...

Creating a canvas that adjusts proportionally to different screen sizes

Currently, I am developing a pong game using Angular for the frontend, and the game is displayed inside an HTML canvas. Check out the HTML code below: <div style="height: 70%; width: 70%;" align="center"> <canvas id=&q ...

Stopping all animations with JQuery animate()

I have a question about stopping multiple animations. Here's some pseudocode to illustrate my situation: CSS #div1 { position: absolute; background-image: url("gfx/cat.jpg"); width: 60px; height: 70px; background-size: 50%; b ...

How can I change the text of a single button by clicking on it without affecting the other buttons that share the same

Currently, I am implementing a posting system where posts can be added using a button. The posts have two additional buttons - one to show/hide content and the other to delete content. I am utilizing jQuery's slideToggle event to toggle the visibility ...