What is the process for adjusting the height of a scrollbar thumb?

Is it possible to set a fixed height for the scrollbar and adjust the amount of content scrolled accordingly with CSS? Here is my current CSS code:

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

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #003B7C; 
    border-radius: 10px;
    background: white;
    border-left: 8px solid rgba(255,255,255,0);
    border-right: 8px solid rgba(255,255,255,0);
    background-clip: content-box;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to right,#003B7C, #00538B, #83BBE6); 
    border-radius: 8px;
}
javascripthtmlcssscrollbar

Answer №1

Link to jsfiddle example

.visible-scrollbar::-webkit-scrollbar-thumb {
    background-color: #acacac;
    border-radius: 50px;
    height: 120px;
}

After some experimentation, I discovered that by adjusting the height property of "::-webkit-scrollbar-thumb", I could partially control the height of the scroll thumb. However, it seems there is a minimum height value that I couldn't surpass.

Perhaps this information could be useful in your project.

Answer №2

When it comes to scrollbar height, it's not just about the "::webkit-scrollbar", but more importantly about the content height itself. To control the scrollbar height, you need to set "max-height" and "overflow-y" properties for your content. The height of the scrollbar is determined by the size of the content within.

For example, if you have something like this:

<div class="wrapper">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat adipisci itaque beatae quisquam corporis. Eos praesentium temporibus autem assumenda enim aspernatur culpa, esse quam, optio, molestias dolor sapiente vel deserunt!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit provident illo placeat nemo sint dolores quod temporibus, doloremque repudiandae, cum architecto, nostrum aut ipsum atque. Aspernatur autem error unde praesentium!</p>
</div>

If you style it with CSS like this:

.wrapper {
    width: 300px;
    max-height: 200px;
    overflow-y: scroll;
}

You can effectively specify the height of the scrollbar.

Take a look at this CodePen example.

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

The swinging motion of my reboot sign is perplexing, but the solution lies in simply approaching it directly. How can I address this issue effectively?

I've been struggling with a reloading issue that keeps going back and forth when all I need is for it to go back. I've tried everything I know, but nothing seems to work. Any help would be greatly appreciated. Thank you in advance :) var reloa ...

javascriptcss

Alert: '[Vue warning]: Directive "in testing" could not be resolved.'

Currently, I am running unit tests within a Vue 2.0 application using PhantomJS, Karma, Mocha and Chai. Although the tests are passing successfully, I am encountering a warning message with each test indicating an issue like this: ERROR: '[Vue warn ...

javascriptphantomjsvue.jskarma-mochamocha-phantomjs

Adding Conditionally Specified Properties to a Parameterized TypeScript Interface Based on Type

Encountering a challenge with TypeScript where I need to selectively add properties to a generic interface depending on the type parameter. Let me explain further with an example: Consider two interfaces, A and G<T>: interface A { IA: string; } ...

javascripttypescripttypescript-generics

Animated CSS side panel

I'm currently working on creating an animation for a side menu. The animation works perfectly when I open the menu, but the problem arises when I try to animate it back closed. Is there a property that allows the animation to play in reverse when the ...

cssangularcss-animations

Intersection of content in panel-body using bootstrap tab pills

Can someone help me solve a major issue? I need the content of each tab to overlap as if they are unaware of each other. Currently, my code is saved in this fiddle: https://jsfiddle.net/axq882de/1/. When I click on different tabs, the contents should remai ...

jqueryhtmlcsstwitter-bootstrap-3

Identifying the HTML tag under the cursor with TWebBrowser

Is there a way to determine which HTML tag, specifically a hyperlink, the caret is currently on? procedure THTMLEdit.ShowTag; var CursorPos: TPoint; HtmlElement: IHTMLElement; iHTMLDoc: IHtmlDocument2; begin if Supports(wbBrowser.Document, IHt ...

htmldelphiinternet-explorerdelphi-xe7twebbrowser

When a new marker is clicked on Google Maps, the previous Infowindow will automatically close

Here are some specific locations to consider: var places = [{ "id": 1, "ReferenceNumber": "52525252525", "Address" : "School" , "Latitude": "21.585486", "Longitude": & ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Math operations limited by boundaries: adding and subtracting

What is the proper way to implement this logic in JavaScript: Row-=21; if (Row < 1) { Row = 1; } ...

javascript

Searching for different forms of multiple words using regular expressions

I have a value saved in a variable: var myvalue = "hello bye"; var myText = "hellobye is here and hello-bye here and hello.bye" Is there a way to check if different versions of myvalue are present in the text? I am currently using this pattern: hello ...

javascriptregex

Utilizing the onCLICK event handler with numerous parameters

I'm in need of assistance with creating a function that involves multiple variables, preferably at least two... The table I am working with was generated using PHP and MySQL, all IDs were dynamically created which is why I am looking for a way to cap ...

jqueryhtmlajaxfunctiononclick

Strangely peculiar glitch found in browsers built on the Chromium platform

During a school assignment, I'm attempting to adjust the width of a button using Javascript. Below is my code: const button = document.querySelector("button"); button.addEventListener("click", () => { console.log(button.offsetWidth); butto ...

javascripthtmlgoogle-chromemicrosoft-edgechromium

Color of selected Bootstrap radio toggle buttons

Can anyone help me figure out how to customize the colors of radio toggle buttons using my style.css in Bootstrap? I've managed to change the background color in normal mode, but I'm struggling with changing the checked state. I've searched ...

htmlcssbootstrap-5

Vue text failed to display the variable. Any ideas on why?

While working with a library, I encountered the issue of having "Close {{myVar}}" displayed on the screen. Can anyone guide me on how to use template literals in Vue? I have experience with React JSX. <template> <a-alert message="Info Tex ...

javascriptreactjsvue.jsvuex

Using Javascript to Manuever an Element via Arrow Inputs

Currently, I am in the process of developing a Tetris game with a rotating Tetris piece controlled by pressing the space bar. My next objective is to enable the movement of objects to the left and right using the arrow keys. After exploring various simila ...

javascripthtmlcss

Execute HTML and JS files through Eclipse PDT to view in a web browser

Is it possible to open HTML and JS files in a web browser within Eclipse PDT? Right now, only PHP files seem to launch successfully, otherwise an "Unable to Launch" dialog pops up. Any advice is appreciated! ...

javascripthtmleclipse-pdtlaunch

I'm having trouble getting my if statement to function properly with a random number

I'm currently working on creating a natural disaster sequence for my game, and I'm using Math.random to simulate different outbreak scenarios. However, I've encountered an issue at the end of my code where an if statement is supposed to trig ...

javascripthtml

Tips for building dynamic drop downs with JavaScript?

I'm currently working on a personal project and I've hit a roadblock when it comes to saving and utilizing the selections made from dropdown lists. For instance: <select id = "CarType" onchange = "cartype()"> <option value = "car"&g ...

javascriptjqueryhtml

Ways to create gaps between rows of a table

I have been attempting to replicate the layout of this table: https://i.sstatic.net/1QuFD.png However, I am running into an issue with the spacing between the rows (border-spacing: 0 2px), and I'm not sure why. Can anyone provide any guidance on thi ...

css

whether you need a cache factory or a regular object

As I embark on creating a mid-sized Angular application, one of my requirements is to store data and utilize it at the end of the user journey for sending to the server (as per company security policy regarding customer data transport). As a relatively new ...

javascriptangularjs

Adjusting CSS to realign images on various screen types

I am facing an issue with displaying a background image on a static web page. The height appears differently on various LCD screens. How can I ensure that the height adjusts to approximately 80% of the area? I have tried giving a percentage in the style fo ...

htmlcsstwitter-bootstrapbootstrap-4