I've come across several discussions on making the track thinner than the scrollbar thumb, but I'm looking to do the opposite.
Is it possible to have a scrollbar track that is thicker than the scrollbar thumb?
I've come across several discussions on making the track thinner than the scrollbar thumb, but I'm looking to do the opposite.
Is it possible to have a scrollbar track that is thicker than the scrollbar thumb?
::-webkit-scrollbar {
width: 5px
}
::-webkit-scrollbar-thumb {
background: #777
}
::-webkit-scrollbar-thumb:hover {
background: #555
}
.scroll {
height: 15rem;
position: relative;
overflow-y: auto;
width: 20rem;
direction: rtl;
/* or */
direction: ltr;
}
<div class='scroll'>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>If you're using Chrome (not Firefox), it is possible to set the right/left border on the scrollbar thumb to match the color of the scrollbar itself:
.content
{
--scrollbar-size: 30px;
--scrollbar-color: #f8bbd0;
--scrollbar-thumb-size: 15px;
--scrollbar-thumb-color: #e91e63;
height: 100px;
width: 100px;
background: #F5F5F5;
overflow-y: scroll;
}
.overflow
{
min-height: 450px;
}
.content::-webkit-scrollbar
{
width: var(--scrollbar-size);
background-color: var(--scrollbar-color) ;
}
.content::-webkit-scrollbar-thumb
{
border: calc((var(--scrollbar-size) - var(--scrollbar-thumb-size)) / 2) solid var(--scrollbar-color);
background-color: var(--scrollbar-thumb-color);
border-top: 0;
border-bottom: 0;
}<div class="content">
<div class="overflow">
some text
</div>
<div>end</div>
</div>One drawback of this approach: it's not possible to achieve a thumb with perfectly round corners.
Alternatively, you could consider creating your own custom scrollbar (there are many tutorials available for that).
Looking for assistance with adding value labels to the top of each column bar in a Vue chart using chartkick and highcharts. https://i.sstatic.net/c4Bwc.jpg Check out the image above to see my current output. <template> <column-chart lable= ...
I have been searching for an answer on how to pass the JWT Token from the client to the server securely, but I am not satisfied with the explanations I found. Everyone talks about the most secure way to transfer the JWT token using HTTP headers instead of ...
There is something on my website that resembles this: $("#id").html(msg2show).dialog({ //Other attributes buttons: { "Yes": function() {//Code}, "No": function() {//Code} } ...
I currently have 2 mirror sections within my DOM, one for delivery and another for pickup. Both of these sections contain identical content structures. Here's an example: <div class="main-section"> <div class="description-content"> ...
When working with my express route, I encountered an issue trying to pass a component for use in a render function that handles Server-Side Rendering (SSR). Express Route: import SettingsConnected from '../../../client/components/settings/settings-c ...
Understanding that TypeScript uses object passing by reference can be challenging, especially when dealing with deep copy issues. This becomes particularly cumbersome when working within a theme. I recently encountered an issue with a component containing ...
Incorporating angularjs and bootstrap3, I'm in search of the best way to center widgets within a panel and achieve responsive behavior. Interestingly, the results vary across browsers, particularly in Firefox. Within my code, I have 4 column divs str ...
Recently, I've been working with a FormulateInput select component that looks like this: <FormulateInput name="broj_zns-a" @change="setZns" :value="brojZnsa" type="select" label="Broj ZNS- ...
Encountering an error while debugging an Angular JS application in the WebStorm IDE. The error message states: "XMLHttpRequest cannot load file:///C:/Users/../list.html. Cross origin requests are only supported for HTTP." Provided Javascript code : var a ...
What makes a function good is how it is declared: export declare class SOMETHING implements OnDestroy { sayHello() { // some code to say hello } } However, while exploring the node_modules (specifically in angular material), I stumbled up ...
I am currently developing a drag and drop file uploader that can be activated by either clicking the label or dragging a file onto the label. The input field includes a jQuery on change event that is triggered when a file is selected. However, it only see ...
I aim to create a div that displays different animal sounds, like: Dog says Bark Bark I've attempted various methods but I'm unable to get each pair in the array to show up in a div: const animal = [ {creature: "Dog", sound: "B ...
Here is my website link: forumdisplay.php?462-%EE%F9%E7%F7%E9%ED-%E1%F8%F9%FA I suspect that the url is URL Encoded. I am using vbulletin 4.1.12 How can I resolve this issue? Replace 462-%EE%F9%E7%F7%E9%ED-%E1%F8%F9%FA with f=462 ...
Looking for a way to eliminate the effect of an inherited CSS property with Jquery. .class1 #id1 div.class2 input.class-input{ border-color: #bbb3b9 #c7c1c6 #c7c1c6; } Can someone explain how to delete this "border-color"? Thanks. ...
Currently, I am attempting to loop through an EJS JSON object and verify the existence of values. If a value does exist, I want to add the corresponding URL to an array further down. Upon loading the page, I am encountering an issue where I am informed th ...
Looking to generate an image of a web page, like creating a miniature version of the HTML and images. It doesn't need to be exact (no need for Flash/JavaScript rendering). I plan to use this on Linux - preferably with a Java library, but a command li ...
I have just created a new project in VueJS and incorporated TypeScript into it. Below is my component along with some testing methods: <template> <div></div> </template> <script lang="ts"> import { Component, Vue } from ...
I'm currently working on creating a login page using Angularjs and node.js, but I'm encountering an issue with sending data from the controller to my database connection file for performing transactions. The error message reads: POST http://loca ...
I am working on a Vue app and I need to access some image files from an included JS file for different purposes, such as adding images to a canvas element. Usually, this task is simple with code like the following: function getImage() { let img = new Im ...
Looking to incorporate JSON Array data into an HTML list with Headings/Subheadings using JavaScript. I experimented with two methods - one involving jQuery and the other mostly vanilla JS. The initial attempt (link here: http://jsfiddle.net/myu3jwcn/6/) b ...