Socket
Socket
Sign inDemoInstall

simplebar

Package Overview
Dependencies
Maintainers
1
Versions
107
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

simplebar

Scrollbars, simpler.


Version published
Weekly downloads
466K
increased by0.9%
Maintainers
1
Weekly downloads
 
Created

What is simplebar?

SimpleBar is a custom scrollbar library that aims to provide a simple and lightweight solution for creating custom scrollbars that look consistent across different browsers and platforms. It allows you to style the scrollbar to match your application's design while maintaining native scrolling performance.

What are simplebar's main functionalities?

Custom Scrollbars

SimpleBar allows you to create custom scrollbars by adding a `data-simplebar` attribute to your HTML elements. This will replace the default scrollbar with a custom one that you can style using CSS.

<div data-simplebar style="max-height: 300px;">
  Your content here
</div>

Auto-Hiding Scrollbars

You can control the auto-hide behavior of the scrollbar by setting the `data-simplebar-auto-hide` attribute to `false`. This will keep the scrollbar visible at all times.

<div data-simplebar-auto-hide="false" style="max-height: 300px;">
  Your content here
</div>

RTL Support

SimpleBar supports right-to-left (RTL) text direction. You can enable this by setting the `data-simplebar-direction` attribute to `rtl`.

<div data-simplebar-direction="rtl" style="max-height: 300px;">
  Your content here
</div>

Custom Scrollbar Styles

You can customize the appearance of the scrollbar by targeting the `.simplebar-scrollbar` class in your CSS. This allows you to change the color, width, and other styles of the scrollbar.

<style>
  .simplebar-scrollbar::before {
    background-color: #3498db;
  }
</style>
<div data-simplebar style="max-height: 300px;">
  Your content here
</div>

Other packages similar to simplebar

FAQs

Package last updated on 13 Jun 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc