search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Migrating to v2
      • Internationalization guide
      • Class customization
      • Icons Integration
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Angular
      • ASP.NET
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • Qwik
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Autocomplete
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Multi range slider
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Admin Charts
      • Admin Complex
      • Admin Forms
      • Admin Maps
      • Admin Navigation
      • Admin tables
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Stats admin
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips
    • Overview
    • API

    Tailwind Scrollbar method

    Tailwind CSS Scrollbar

    Scrollbar method which allows you to create a custom scrollbar.

    Required ES init: PerfectScrollbar *
    * UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using TW Elements ES format then you should pass the required components to the initTWE method.

    Basic example

    Scrollbar is initialized automatically when you add data-twe-perfect-scrollbar-init attribute to your container.

    Wild Landscape
    • HTML
    • javascript
            
                
          <div
            data-twe-perfect-scrollbar-init
            class="relative h-[400px] w-[600px] overflow-hidden">
            <img
              src="https://tecdn.b-cdn.net/img/new/slides/041.webp"
              alt="Wild Landscape"
              class="h-[700px] w-[1000px] max-w-none" />
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            PerfectScrollbar,
            initTWE,
          } from "tw-elements";
          
          initTWE({ PerfectScrollbar });
          
            
        

    Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Options

    JavaScript init

    You can easily init scrollbar with JavaScript. You have to invoke PerfectScrollbar() or twe.PerfectScrollbar() if you are using UMD format and include options within that.

    Wild Landscape
    • HTML
    • javascript
    • umd
            
                
          <div id="init-by-js" class="relative h-[400px] w-[600px] overflow-hidden">
            <img
              src="https://tecdn.b-cdn.net/img/new/slides/041.webp"
              alt="Wild Landscape"
              class="h-[700px] w-[1000px] max-w-none" />
          </div>
          
            
        
            
                
          import { PerfectScrollbar } from "tw-elements";
          
          const initByJS = document.querySelector("#init-by-js");
          const psInitbyJS = new PerfectScrollbar(initByJS);
          
            
        
            
                
          const initByJS = document.querySelector("#init-by-js");
          const psInitbyJS = new twe.PerfectScrollbar(initByJS);
          
            
        

    Data attributes

    You can easily init scrollbar with options with data-twe-attributes. You have to add data-twe-perfect-scrollbar-init to your wrapper. If you want add options with data-twe-attr you have to add for example data-twe-suppress-scroll-x="true" to your container.

    ...
    • HTML
    • javascript
            
                
          <div
            data-twe-perfect-scrollbar-init
            data-twe-suppress-scroll-x="true"
            class="relative h-[400px] w-[600px] overflow-hidden">
            <img
              src="https://tecdn.b-cdn.net/img/new/slides/041.webp"
              alt="..."
              class="h-[700px] w-[1000px] max-w-none" />
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            PerfectScrollbar,
            initTWE,
          } from "tw-elements";
          
          initTWE({ PerfectScrollbar });
          
            
        

    Colors example

    Scrollbar's thumb and rail's colors can be customized by changing the default classes we add to them. Change the classes of the Scrollbar element that you would like to edit: railXColors, railXThumbColors, railYColors or railYThumbColors. Visit the API section to see the default classes for those elements.

    ...
    • HTML
    • javascript
    • umd
            
                
          <div
            id="scroll-colors"
            class="relative h-[400px] w-[600px] overflow-hidden">
            <img
              src="https://tecdn.b-cdn.net/img/new/slides/041.webp"
              alt="..."
              class="h-[700px] w-[1000px] max-w-none" />
          </div>
          
            
        
            
                
          import { PerfectScrollbar } from "tw-elements";
          
          const scrollColors = document.querySelector("#scroll-colors");
          const initScrollColors = new PerfectScrollbar(
            scrollColors,
            {},
            {
              railXColors:
                "group-[&.ps--active-x]/ps:!bg-[#90ee90] hover:!bg-[#eee] focus:!bg-[#eee] [&.ps--clicking]:!bg-[#eee]",
              railXThumbColors:
                "!bg-[#006400] group-hover/x:bg-[#999] group-focus/x:bg-[#999] group-[&.ps--clicking]/x:bg-[#999]",
              railYColors:
                "group-[&.ps--active-y]/ps:!bg-[#90ee90] hover:!bg-[#eee] focus:!bg-[#eee] [&.ps--clicking]:!bg-[#eee]",
              railYThumbColors:
                "!bg-[#006400] group-hover/y:bg-[#999] group-focus/y:bg-[#999] group-[&.ps--clicking]/y:bg-[#999]",
            }
          );
          
            
        
            
                
          const scrollColors = document.querySelector("#scroll-colors");
          const initScrollColors = new twe.PerfectScrollbar(
            scrollColors,
            {},
            {
              railXColors:
                "group-[&.ps--active-x]/ps:!bg-[#90ee90] hover:!bg-[#eee] focus:!bg-[#eee] [&.ps--clicking]:!bg-[#eee]",
              railXThumbColors:
                "!bg-[#006400] group-hover/x:bg-[#999] group-focus/x:bg-[#999] group-[&.ps--clicking]/x:bg-[#999]",
              railYColors:
                "group-[&.ps--active-y]/ps:!bg-[#90ee90] hover:!bg-[#eee] focus:!bg-[#eee] [&.ps--clicking]:!bg-[#eee]",
              railYThumbColors:
                "!bg-[#006400] group-hover/y:bg-[#999] group-focus/y:bg-[#999] group-[&.ps--clicking]/y:bg-[#999]",
            }
          );
          
            
        

    Events

    PerfectScrollbar dispatches custom events.

    • ScrollX
    • ScrollY
    • ScrollUp
    • ScrollDown
    • ScrollLeft
    • ScrollRight
    • ScrollXEnd
    • ScrollYEnd
    • ScrollXStart
    • ScrollYStart

    Example

    Wild Landscape
    Scroll exmaple
    ...
    • HTML
    • javascript
    • umd
            
                
          <div id="scroll-x" class="relative h-[400px] w-[600px] overflow-hidden">
            <img
              src="https://tecdn.b-cdn.net/img/new/slides/041.webp"
              alt="Wild Landscape"
              class="h-[700px] w-[1000px] max-w-none" />
          </div>
          
            
        
            
                
          import { PerfectScrollbar } from "tw-elements";
          
          const scrollX = document.querySelector("#scroll-x");
          const initscrollX = new PerfectScrollbar(scrollX);
        
          scrollX.addEventListener('scrollX.twe.ps', (e) => {
            // do something...
          });
          
            
        
            
                
          const scrollX = document.querySelector("#scroll-x");
          const initscrollX = new twe.PerfectScrollbar(scrollX);
    
          scrollX.addEventListener('scrollX.twe.ps', (e) => {
            // do something...
          });
          
            
        

    Related resources

    Perfect Scrollbar
    • Basic example
    • Options
    • JavaScript init
    • Data attributes
    • Colors example
    • Events
    • Related resources

    Tailwind Scrollbar method - API


    Import

    Importing components depends on how your application works. If you intend to use the TW elements ES format, you must first import the component and then initialize it with the initTWE method. If you are going to use the UMD format, just import the tw-elements package.

    • javascript
    • umd
            
                
            import { PerfectScrollbar, initTWE } from "tw-elements";
            initTWE({ PerfectScrollbar });
            
            
        
            
                
            import "tw-elements";
            
            
        

    Usage

    Via data attributes

    Add the data-twe-perfect-scrollbar-init attribute to the clickable element to apply the ripple effect. For ES format, you must first import and call the initTWE method.

    • HTML
            
                
            <div
              data-twe-perfect-scrollbar-init
              class="relative h-[400px] w-[600px] overflow-hidden">
              <img
                src="https://tecdn.b-cdn.net/img/new/slides/041.webp"
                alt="Wild Landscape"
                class="h-[700px] w-[1000px] max-w-none" />
            </div>
            
            
        

    Via JavaScript

    • javascript
    • umd
            
                
            const initByJS = document.querySelector("#init-by-js");
            const psInitbyJS = new PerfectScrollbar(initByJS);
            
            
        
            
                
            const initByJS = document.querySelector("#init-by-js");
            const psInitbyJS = new twe.PerfectScrollbar(initByJS);
            
            
        

    Options

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-twe-, as in data-twe-wheel-speed="2".

    Name Type Default Description
    handlers String[] ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'] It is a list of handlers to scroll the element.
    wheelSpeed Number 1 The scroll speed applied to mousewheel event.
    wheelPropagation Boolean true If this option is true, when the scroll reaches the end of the side, mousewheel event will be propagated to parent element.
    swipeEasing Boolean true If this option is true, swipe scrolling will be eased.
    minScrollbarLength Number | null null When set to an integer value, the thumb part of the scrollbar will not shrink below that number of pixels.
    maxScrollbarLength Number | null null When set to an integer value, the thumb part of the scrollbar will not expand over that number of pixels.
    scrollingThreshold Number 1000 This sets threshold for ps--scrolling-x and ps--scrolling-y classes to remain. In the default CSS, they make scrollbars shown regardless of hover state. The unit is millisecond.
    suppressScrollX Boolean false When set to true, the scrollbar in X-axis will not be available, regardless of the content width.
    suppressScrollY Boolean false When set to true, the scroll bar in Y-axis will not be available, regardless of the content height.
    scrollXMarginOffset Number 0 The number of pixels the content width can surpass the container width without enabling the X-axis scroll bar. Allows some "wiggle room" or "offset break", so that X-axis scroll bar is not enabled just because of a few pixels.
    scrollYMarginOffset Number 0 The number of pixels the content width can surpass the container width without enabling the Y-axis scroll bar. Allows some "wiggle room" or "offset break", so that Y-axis scroll bar is not enabled just because of a few pixels.
    positionRight Boolean true Changes the sides of scrollbar rails

    Classes

    Custom classes can be passed via data attributes or JavaScript. For data attributes, append the class name to data-twe-class, as in data-twe-class-ps="".

    Name Default Description
    ps group/ps overflow-hidden [overflow-anchor:none] touch-none Sets styles for perfect scrollbar wrapper.
    railX group/x absolute bottom-0 h-[0.9375rem] hidden opacity-0 transition-[background-color,_opacity] duration-200 ease-linear motion-reduce:transition-none z-[1035] group-[&.ps--active-x]/ps:block group-hover/ps:opacity-60 group-focus/ps:opacity-60 group-[&.ps--scrolling-x]/ps:opacity-60 hover:!opacity-90 focus:!opacity-90 [&.ps--clicking]:!opacity-90 outline-none Adds styles for horizontal scrollbar rail.
    railXColors group-[&.ps--active-x]/ps:bg-transparent hover:!bg-[#eee] focus:!bg-[#eee] [&.ps--clicking]:!bg-[#eee] dark:hover:!bg-[#9e9e9e] dark:focus:!bg-[#9e9e9e] dark:[&.ps--clicking]:!bg-[#9e9e9e] Adds styles for horizontal scrollbar rail. Decides the color of the x rail.
    railXThumb absolute bottom-0.5 rounded-md h-1.5 group-focus/ps:opacity-100 group-active/ps:opacity-100 [transition:background-color_.2s_linear,_height_.2s_ease-in-out] group-hover/x:h-[11px] group-focus/x:h-[0.6875rem] group-[&.ps--clicking]/x:bg-[#999] group-[&.ps--clicking]/x:h-[11px] outline-none Adds styles for horizontal scrollbar thumb.
    railXThumbColors bg-[#9e9e9e] group-hover/x:bg-[#9e9e9e] group-focus/x:bg-[#9e9e9e] group-[&.ps--clicking]/x:bg-[#9e9e9e] dark:bg-[#eee] dark:group-hover/x:bg-[#eee] dark:group-focus/x:bg-[#eee] dark:group-[&.ps--clicking]/x:bg-[#eee] Adds styles for horizontal scrollbar thumb. Decides the color of the x thumb.
    railY group/y absolute end-0 w-[0.9375rem] hidden opacity-0 transition-[background-color,_opacity] duration-200 ease-linear motion-reduce:transition-none z-[1035] group-[&.ps--active-y]/ps:block group-hover/ps:opacity-60 group-focus/ps:opacity-60 group-[&.ps--scrolling-y]/ps:opacity-60 hover:!opacity-90 focus:!opacity-90 [&.ps--clicking]:!opacity-90 outline-none Adds styles for vertical scrollbar rail.
    railYColors group-[&.ps--active-y]/ps:bg-transparent hover:!bg-[#eee] focus:!bg-[#eee] [&.ps--clicking]:!bg-[#eee] dark:hover:!bg-[#9e9e9e] dark:focus:!bg-[#9e9e9e] dark:[&.ps--clicking]:!bg-[#9e9e9e] Adds styles for vertical scrollbar rail. Decides the color of the y rail.
    railYThumb absolute end-0.5 rounded-md w-1.5 group-focus/ps:opacity-100 group-active/ps:opacity-100 [transition:background-color_.2s_linear,_width_.2s_ease-in-out,_opacity] group-hover/y:w-[11px] group-focus/y:w-[0.6875rem] group-[&.ps--clicking]/y:w-[11px] outline-none Adds styles for vertical scrollbar thumb.
    railYThumbColors bg-[#9e9e9e] group-hover/y:bg-[#9e9e9e] group-focus/y:bg-[#9e9e9e] group-[&.ps--clicking]/y:bg-[#9e9e9e] dark:bg-[#eee] dark:group-hover/y:bg-[#eee] dark:group-focus/y:bg-[#eee] dark:group-[&.ps--clicking]/y:bg-[#eee] Adds styles for vertical scrollbar thumb. Decides the color of the y thumb.

    Methods

    Method Description Example
    dispose Destroy PerfectScrollbar instance. myPs.dispose()
    getInstance Static method which allows you to get the perfect scrollbar instance associated to a DOM element. PerfectScrollbar.getInstance(myPs)
    getOrCreateInstance Static method which returns the perfect scrollbar instance associated to a DOM element or create a new one in case it wasn't initialized. PerfectScrollbar.getOrCreateInstance(myPs)
    update Update PerfectScrollbar myPs.update()
    • javascript
    • umd
            
                
            const myPs = document.getElementById('myPsID')
            const ps = new PerfectScrollbar(myPs)
            ps.dispose()
            
            
        
            
                
            const myPs = document.getElementById('myPsID')
            const ps = new twe.PerfectScrollbar(myPs)
            ps.dispose()
            
            
        

    Events

    Event type Description
    scrollX.twe.ps This event fires when the x-axis is scrolled in either direction.
    scrollY.twe.ps This event fires when the y-axis is scrolled in either direction.
    scrollUp.twe.ps This event fires when scrolling upwards.
    scrollDown.twe.ps This event fires when scrolling downwards.
    scrollLeft.twe.ps This event fires when scrolling to the left.
    scrollRight.twe.ps This event fires when scrolling to the right.
    scrollYStart.twe.ps This event fires when scrolling reaches the start of the y-axis.
    scrollXStart.twe.ps This event fires when scrolling reaches the start of the x-axis.
    scrollXEnd.twe.ps This event fires when scrolling reaches the end of the x-axis.
    scrollYEnd.twe.ps This event fires when scrolling reaches the end of the y-axis (useful for infinite scroll).
    • JavaScript
            
                
            const myPs = document.getElementById('element-id')
            myPs.addEventListener('scrollYEnd.twe.ps', (e) => {
              // do something...
            })
            
            
        
    • Import
    • Usage
    • Options
    • Classes
    • Methods
    • Events
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2024 Copyright: MDBootstrap.com

    Access restricted

    To view this section you must have an active PRO account

    Log in to your account or purchase an TWE subscription if you don't have one.

    Buy TWE PRO