no-scrollbar-manually

Dead simple, zero-dependency utilities to hide, thin, and fully customize scrollbars. Works with JavaScript, TypeScript, React, and raw HTML. Includes a CLI for generating global CSS.

Install

npm install no-scrollbar-manually

Usage

JavaScript/TypeScript API

import { hideScrollbars, thinScrollbars, configureGlobal, applyScrollbars } from 'no-scrollbar-manually';

Hide Scrollbars

// Hide scrollbars on a single element
hideScrollbars('#my-element');

// Hide scrollbars on multiple elements
hideScrollbars('.scrollable-items');

// Include children elements
hideScrollbars('#container', { children: true });

// Include parent elements
hideScrollbars('#child', { parents: true });

// Combine children and parents
hideScrollbars('#target', { children: true, parents: true });

Thin/Custom Scrollbars

// Basic thin scrollbar
thinScrollbars('.scroll-area', { size: 6 });

// Full customization
thinScrollbars('.custom-scroll', {
  size: 8,           // Scrollbar width/height in pixels
  radius: 4,         // Border radius in pixels
  thumbColor: '#666', // Scrollbar thumb color
  trackColor: '#f0f0f0', // Scrollbar track color
  thumbOpacity: 0.8, // Thumb opacity (0-1)
  trackOpacity: 0.5, // Track opacity (0-1)
  children: true,    // Apply to child elements
  parents: false     // Apply to parent elements
});

// Different color formats supported
thinScrollbars('.scroll-area', {
  thumbColor: 'red',           // Named colors
  thumbColor: '#ff0000',       // Hex colors
  thumbColor: 'rgb(255,0,0)',  // RGB colors
  trackColor: 'transparent'    // Transparent background
});

Global Configuration

// Configure global scrollbar styling
configureGlobal({
  hide: false,        // Hide all scrollbars globally
  thin: true,         // Make all scrollbars thin
  size: 6,
  radius: 3,
  thumbColor: '#999',
  trackColor: 'transparent',
  thumbOpacity: 1,
  trackOpacity: 0,
  targetSelector: 'body' // Apply to body by default
});

// Hide all scrollbars globally
configureGlobal({ hide: true });

// Thin all scrollbars with custom colors
configureGlobal({
  thin: true,
  thumbColor: '#666',
  trackColor: '#eee'
});

Unified API

// Use applyScrollbars for dynamic styling
applyScrollbars('#element', 'hide'); // Hide scrollbars
applyScrollbars('#element', 'thin', { size: 4, thumbColor: 'blue' }); // Thin with options

React Component

import { NoScrollbarManually } from 'no-scrollbar-manually/react';

function MyComponents() {
  return (
    <>
      {/* Hide scrollbars */}
      <NoScrollbarManually mode="hide">
        <div>Content without scrollbars</div>
      </NoScrollbarManually>

      {/* Thin scrollbars */}
      <NoScrollbarManually
        mode="thin"
        size={6}
        thumbColor="#666"
        style={{ overflow: 'auto', maxHeight: 300 }}
      >
        <div>Content with thin scrollbars</div>
      </NoScrollbarManually>

      {/* Full customization */}
      <NoScrollbarManually
        mode="thin"
        size={8}
        radius={4}
        thumbColor="#333"
        trackColor="#f5f5f5"
        thumbOpacity={0.8}
        trackOpacity={0.3}
        includeChildren={true}
        includeParents={false}
        as="section" // Custom element type
        className="my-scrollable-area"
        style={{ overflow: 'auto', height: '400px' }}
      >
        <div>Highly customized scrollbars</div>
      </NoScrollbarManually>
    </>
  );
}

All Props:

• mode: 'hide' | 'thin' - Hide or thin scrollbars
• size: number - Scrollbar width/height in pixels
• radius: number - Border radius in pixels
• thumbColor: string - Scrollbar thumb color
• trackColor: string - Scrollbar track color
• thumbOpacity: number - Thumb opacity (0-1)
• trackOpacity: number - Track opacity (0-1)
• includeChildren: boolean - Apply to child elements
• includeParents: boolean - Apply to parent elements
• as: string - Custom element type (default: 'div')

HTML Attributes (No Bundler)

<script src="./node_modules/no-scrollbar-manually/browser.js"></script>

<!-- Hide scrollbars -->
<div data-no-scrollbar-manually="hide">No scrollbars here</div>

<!-- Thin scrollbars -->
<div data-no-scrollbar-manually="thin">Thin scrollbars</div>

<!-- Full customization -->
<div
  data-no-scrollbar-manually="thin"
  data-no-scrollbar-manually-size="8"
  data-no-scrollbar-manually-radius="4"
  data-no-scrollbar-manually-thumb="#333"
  data-no-scrollbar-manually-track="#f5f5f5"
  data-no-scrollbar-manually-thumb-opacity="0.8"
  data-no-scrollbar-manually-track-opacity="0.3"
  data-no-scrollbar-manually-children="true"
  data-no-scrollbar-manually-parents="false"
  style="overflow: auto; height: 300px"
>
  Custom styled scrollbars
</div>

All Attributes:

• data-no-scrollbar-manually: 'hide' | 'thin'
• data-no-scrollbar-manually-size: Scrollbar width/height
• data-no-scrollbar-manually-radius: Border radius
• data-no-scrollbar-manually-thumb: Thumb color
• data-no-scrollbar-manually-track: Track color
• data-no-scrollbar-manually-thumb-opacity: Thumb opacity (0-1)
• data-no-scrollbar-manually-track-opacity: Track opacity (0-1)
• data-no-scrollbar-manually-children: 'true' to include children
• data-no-scrollbar-manually-parents: 'true' to include parents

CLI for Global CSS

# Create default config file
npx no-scrollbar-manually init

# Build CSS from default config
npx no-scrollbar-manually build

# Build with custom config and output file
npx no-scrollbar-manually build my-config.json custom-output.css

Config File (no-scrollbar-manually.config.json):

{
  "global": {
    "hide": false,
    "thin": true,
    "size": 8,
    "radius": 4,
    "thumbColor": "#999999",
    "trackColor": "transparent",
    "thumbOpacity": 1,
    "trackOpacity": 0,
    "selector": "body"
  },
  "targets": [
    {
      "selector": ".hide-scrollbars",
      "hide": true
    },
    {
      "selector": ".thin-scrollbars",
      "thin": true,
      "size": 6,
      "thumbColor": "#666"
    },
    {
      "selector": ".custom-scrollbars",
      "thin": true,
      "size": 10,
      "radius": 5,
      "thumbColor": "#333",
      "trackColor": "#eee",
      "thumbOpacity": 0.8,
      "trackOpacity": 0.5,
      "children": true,
      "parents": false
    }
  ]
}

Features

• Complete scrollbar control - Hide, thin, or fully customize scrollbars
• Zero dependencies - Small footprint, no external libraries
• Cross-browser - Firefox (scrollbar-width/scrollbar-color) and Chromium/WebKit (::-webkit-scrollbar) support
• TypeScript - Full type definitions included
• Tree traversal - Apply styling to elements, children, and parents
• Flexible styling - Customize size, colors, opacity, and radius
• Multiple APIs - JavaScript functions, React components, HTML attributes, CLI
• Dynamic updates - Changes apply immediately, no page reload needed
• Performance optimized - Uses CSS custom properties and efficient DOM manipulation