Creating a CSS animation to mimic the fading in and out effect of the Mac scrollbar when scrolling begins

Question

Creating a CSS animation to mimic the fading in and out effect of the Mac scrollbar when scrolling begins

My journey begins with this:

*::-webkit-scrollbar {

}

*::-webkit-scrollbar-button {

}

*::-webkit-scrollbar-track {


}

*::-webkit-scrollbar-track-piece {

}

*::-webkit-scrollbar-thumb:active {
  width: 6px;
  background-color: red;
}

*::-webkit-scrollbar-corner {

}

*::-webkit-resizer {

}

How can I replicate the animation and fade-in effect of the scrollbar only when scrolling starts, and then make it wider when hovering over it. Currently, applying these styles makes the scrollbar permanently visible. Do I require custom JavaScript for this or is there an alternative method?

All I want to do is change the background image of all scrollbars while maintaining the functionality of existing Mac-style scrollbars.

javascript html css webkit scrollbar

Answer 1

Answer №1

Unfortunately, I do not have a straightforward CSS solution for your query. My usual approach involves utilizing JavaScript along with a custom scrollbar library that you can find here (not associated with me).

To implement this, all you need to do is add the library and then use the following jQuery code to initialize it:

$('.container').mCustomScrollbar({
    theme: "dark-3",
    autoExpandScrollbar: true,
    autoHideScrollbar: true
});

Below is an example of how this works:

$('.container').mCustomScrollbar({
  theme: "dark-3",
  autoExpandScrollbar: true,
  autoHideScrollbar: true
});

.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
  background-color: #fafafa;
  padding: 10px;
  border: 1px solid black;
}

.container p {
  margin: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></ script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.js"></script>
< link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" rel="stylesheet" />

   < div class="container">
  <p>This is a test 1</p>
  <p>This is a test 2</p>
  <p>This is a test 3</p>
  <p>This is a test 4</p>
  <p>This is a test 5</p>
  <p>This is a test 6</p>
  <p>This is a test 7</p>
  <p>This is a test 8</p>
  <p>This is a test 9</p>
  <p>This is a test 10</p>
  <p>This is a test 11</p>
  <p>This is a test 12</p>
  <p>This is a test 13</p>
  <p>This is a test 14</p>
  <p>This is a test 15</p>
  <p>This is a test 16</p>
  <p>This is a test 17</p>
</ div>

Answer 2

Unfortunately, I do not have a straightforward CSS solution for your query. My usual approach involves utilizing JavaScript along with a custom scrollbar library that you can find here (not associated with me).

To implement this, all you need to do is add the library and then use the following jQuery code to initialize it:

$('.container').mCustomScrollbar({
    theme: "dark-3",
    autoExpandScrollbar: true,
    autoHideScrollbar: true
});

Below is an example of how this works:

$('.container').mCustomScrollbar({
  theme: "dark-3",
  autoExpandScrollbar: true,
  autoHideScrollbar: true
});

.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
  background-color: #fafafa;
  padding: 10px;
  border: 1px solid black;
}

.container p {
  margin: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></ script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.js"></script>
< link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" rel="stylesheet" />

   < div class="container">
  <p>This is a test 1</p>
  <p>This is a test 2</p>
  <p>This is a test 3</p>
  <p>This is a test 4</p>
  <p>This is a test 5</p>
  <p>This is a test 6</p>
  <p>This is a test 7</p>
  <p>This is a test 8</p>
  <p>This is a test 9</p>
  <p>This is a test 10</p>
  <p>This is a test 11</p>
  <p>This is a test 12</p>
  <p>This is a test 13</p>
  <p>This is a test 14</p>
  <p>This is a test 15</p>
  <p>This is a test 16</p>
  <p>This is a test 17</p>
</ div>

Creating a CSS animation to mimic the fading in and out effect of the Mac scrollbar when scrolling begins

Answer №1

Similar questions

Retrieving components from Ajax response data

Using Javascript Regular Expressions to validate that the first number in an amount is non-zero

Creating a file solely for route definitions and then employing them within index.js

Is there a way to prevent Django from automatically sanitizing HTML when inserting it into a template?

Creating a dropdown button in HTML table cells with JavaScript: A comprehensive guide

Retrieve content inside an iframe within the parent container

Creating animated content with Blender and Three.js

Is there a way to determine the file size for uploading without using activexobject?

Stylesheet failing to respond to CSS Media queries

The attempt to install "expo-cli" with the command "npm install -g expo-cli" was unsuccessful

Is it possible to utilize ag-grid's API to filter multiple checkbox values simultaneously?

Regular expression is used to limit input to integers only, specifically numbers between -130 and 30

Bootstrap component malfunctioning and not performing as expected

Connect CSS Transition to a click action

Keep only certain fields and eliminate the rest

Executing Multiple Requests Concurrently in Angular 5 using forkJoin Technique

Maximizing Jest's potential with multiple presets in a single configuration file/setup

Utilizing JavaScript to Parse RSS XML Feeds Across Domains

Tips on running jQuery scripts when a div changes its display style from none to block?

"Utilize CSS Flexbox to create a layout with set width and uniform