arm-scrollbar

A custom scrollbar for webkit browsers which hides automatically on touch screens.

Usage no npm install needed!

<script type="module">
  import armScrollbar from 'https://cdn.skypack.dev/arm-scrollbar';
</script>

README

ARM-Scrollbar

Table of contents

About

A custom scrollbar which works on web-kit support browsers. It will get hidden automatically on touch screens, while the scrolling remains functional.

Technologies

This application is created using:

  • scss
  • node-sass

Installation

npm

  • Install it for any npm project with npm using the command bellow:

    $ npm i arm-scrollbar
    

Usage

Adding

  • Add as a stylesheet in your .html:

    <link rel="stylesheet" href="node_modules/arm-scrollbar/lib/main.css">
    
  • Or, Import it in your .scss file:

    @import '~arm-scrollbar/lib/main';
    

Customization

  • You can change the looks of the scrollbar by overriding the variables in your .scss. To do that, follow these steps:
    • First import the _variables.scss from src like this:

      @import '~arm-scrollbar/src/variables';
      
    • Then override each variable with your own values:

      $scroll-background-color: red;
      $scroll-handler-color: blue;
      $scroll-handler-color-hover: yellow;
      $scroll-hollow-color: white;
      $scroll-handler-width: 1.5rem;
      
    • Now import the arm-scrollbar.scss:

      @import '~arm-scrollbar/src/arm-scrollbar';
      

Author

  • Alireza Meftahi

License

This project is licensed under the MIT License.