How to create scrollable element in Tailwind without a scrollbar ?
Last Updated :
26 Jul, 2024
Creating a scrollable element without a visible scrollbar in Tailwind CSS can provide a sleeker UI, reducing clutter and maintaining a clean aesthetic while still allowing users to interact with content via scrolling. To create a scrollable element in Tailwind CSS without a visible scrollbar, apply the overflow-hidden class to the container and `overflow-y-scroll` to the child element. This hides the scrollbar while enabling vertical scrolling within the container.
CSS Properties to hide the scrollbar:
| CSS Property | Description |
|---|
overflow: -moz-scrollbars-none; | Hides the scrollbar in Mozilla Firefox while maintaining scroll functionality. |
overflow: -webkit-scrollbar: none; | Hides the scrollbar in WebKit-based browsers like Chrome and Safari, while retaining scrolling capability. |
scrollbar-width: none; | Removes the scrollbar from an element in modern browsers supporting this property. |
scrollbar-color: transparent; | Removes the scrollbar and sets its color to transparent in modern browsers supporting this feature. |
Pseudo Element used in Tailwind:
- ::-webkit-scrollbar: This pseudo-element allows the users to target the scrollbar specifically for WebKit-based browsers in browsers like Safari, Chrome, etc.
- scrollbar-none: It is a Tailwind CSS class that hides the scrollbar.
Using ::-webkit-scrollbar
Using the ::-webkit-scrollbar pseudo-element to customize scrollbar appearance in WebKit-based browsers. Apply CSS properties like width, height, background, and border-radius to style scrollbar elements, allowing for tailored design and seamless integration with the webpage's visual aesthetic.
Example: In this example we are using Tailwind CSS and custom CSS to hide the scrollbar in a container, creating a scrollable element without a visible scrollbar.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeeksforGeeks - Scrollable Element without Scrollbar</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@layer utilities {
.scrollbar-hide {
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
/* Chrome, Safari and Opera */
}
}
</style>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
<div class="w-full max-w-2xl bg-white rounded-lg shadow-md overflow-hidden">
<header class="bg-green-600 text-white p-6">
<h1 class="text-3xl font-bold mb-2">GeeksforGeeks</h1>
<h2 class="text-xl">Scrollable Element without Scrollbar</h2>
</header>
<main class="p-6">
<div class="bg-gray-100 rounded-lg p-4 mb-4">
<h3 class="text-lg font-semibold text-green-700 mb-2">Instructions</h3>
<p class="text-gray-700">
Scroll through the content below.
Notice there's no visible scrollbar,
but you
can still scroll.
</p>
</div>
<div class="h-64 overflow-y-auto scrollbar-hide bg-white border border-gray-200 rounded-lg shadow-inner">
<div class="p-4 space-y-4">
<p>
GeeksforGeeks is a premier online platform that caters to
the needs of computer science
enthusiasts, students, and professionals alike.
Founded with the vision of making quality tech
education accessible to all, it has grown into a
comprehensive resource hub for everything
related to computer science and programming.
</p>
<p>
The platform offers a wide array of content, including
in-depth tutorials, coding challenges,
interview preparation materials, and courses covering
various programming languages and
technologies. From fundamental concepts like data structures
and algorithms to advanced topics
in artificial intelligence and blockchain,
GeeksforGeeks provides a structured learning path for
individuals at all skill levels.
</p>
<p>
One of the standout features of GeeksforGeeks is its
community-driven approach. The platform
encourages knowledge sharing, allowing experienced
professionals to contribute articles and
solutions. This collaborative environment
fosters a sense of community and ensures that the
content remains up-to-date with the rapidly
evolving tech landscape.
</p>
<p>
For those preparing for technical interviews,
GeeksforGeeks offers a treasure trove of
resources. The platform provides company-specific
interview experiences, coding problems
frequently asked in interviews, and tips on
tackling various types of technical questions. This
makes it an invaluable tool for job seekers
in the tech industry.
</p>
<p>
In addition to its vast repository of free content,
GeeksforGeeks also offers premium courses
and a guided learning path through its
GeeksforGeeks courses. These structured programs are
designed to take learners from basics to
advanced concepts in a systematic manner, often
culminating in the ability to solve complex
coding problems and build real-world projects.
</p>
</div>
</div>
</main>
<footer class="bg-gray-200 p-4 text-center text-gray-600">
<p>© 2023 GeeksforGeeks. All rights reserved.</p>
</footer>
</div>
</body>
</html>
Output:
Approach 2: Using 'overflow-scroll' class
The `overflow-scroll` class in Tailwind CSS enables scrollable elements with a visible scrollbar. By applying this class to a container, it automatically sets the overflow property to allow scrolling when content exceeds the container's dimensions, providing a user-friendly scrolling experience.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeeksforGeeks - Scrollable Content without Scrollbar</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@layer utilities {
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
}
</style>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
<div class="w-full max-w-3xl bg-white rounded-lg shadow-lg overflow-hidden">
<header class="bg-green-600 text-white p-6">
<h1 class="text-4xl font-bold mb-2">GeeksforGeeks</h1>
<h2 class="text-xl">Scrollable Content without Scrollbar</h2>
</header>
<main class="p-6">
<div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-6" role="alert">
<p class="font-bold">Scroll Tip</p>
<p>The content below is scrollable, but the scrollbar is hidden. Try scrolling with your mouse or
touchpad!</p>
</div>
<div
class="h-64 overflow-y-scroll scrollbar-hide bg-green-50 border border-green-200 rounded-lg shadow-inner">
<div class="p-4 space-y-4">
<p>
GeeksforGeeks is a premier computer science portal for geeks. It contains well written, well
thought and well explained computer science and programming articles, quizzes and
practice/competitive programming/company interview Questions.
</p>
<p>
Our team of experienced computer science experts and professionals constantly update the content
to provide the best learning experience. GeeksforGeeks was created with a goal in mind to
provide well written, well thought and well explained solutions for selected questions.
</p>
<p>
The portal has been designed for every geek wishing to expand their knowledge, sharing their
knowledge and preparing for technical interviews. It provides a variety of services for you to
learn, thrive and also have fun! Our vision is to make learning programming easy.
</p>
<p>
GeeksforGeeks provides a platform for all technology enthusiasts to learn, share, and grow. With
a wide range of tutorials, articles, and practice problems, it caters to both beginners and
experienced programmers. The website covers various programming languages, data structures,
algorithms, and computer science concepts, making it an invaluable resource for students,
professionals, and anyone passionate about coding.
</p>
<p>
In addition to its vast collection of technical content, GeeksforGeeks also offers coding
competitions, job opportunities, and a vibrant community where users can interact, ask
questions, and share their knowledge. This comprehensive approach to learning and skill
development has made GeeksforGeeks a go-to platform for millions of technology enthusiasts
worldwide.
</p>
</div>
</div>
</main>
<footer class="bg-green-100 p-4 text-center text-green-700">
<p>© 2023 GeeksforGeeks. All rights reserved.</p>
</footer>
</div>
</body>
</html>
Output:
Similar Reads
How to Create Parallax Effect in Tailwind CSS ? A parallax website includes fixed images in the background that are kept in place and the user can scroll down the page to see different parts of the image. If you use the parallax effect on our page then it helps the user to interact with the page. PreviewCreating Parallax Effect in Tailwind CSS At
3 min read
How To Control The Scroll Snap in Tailwind CSS? To simplify scroll snap effects, a utility-first CSS framework, Tailwind CSS, helps with some utilities. When scroll snapping is in place, users are guided through the content smoothly by snapping elements into position as they scroll down the page, resulting in a more polished and responsive experi
4 min read
How to Create A Sticky NavBar Using Tailwind CSS? Sticky Navbar in Tailwind CSS is mostly used in applications where maintaining quick access to navigation links is essential as users scroll through content. It ensures that the navbar remains visible at the top of the screen, enhancing user experience by providing constant access to key sections of
4 min read
How to Create a Scroll To Top Button in React JS ? You will see there are lots of websites, that are using a useful feature like if you're scrolling the webpage, and now you are at the bottom of that page then you can use this button to scroll up automatically like skip to the content. The following example covers create a Scroll To Top button in Re
3 min read
Create Animated Scroll-to-Top Button in Tailwind CSS An animated scroll-to-top button is a user interface element that appears on a webpage when the user scrolls down. It allows the user to quickly return to the top of the page with a single click or tap. This feature is often implemented using CSS animations or transitions, and it can enhance the use
2 min read
How to centre an Element using Tailwind CSS ? Tailwind CSS follows a utility-first approach, which means that instead of writing custom CSS for each component, we can utilize pre-defined classes that apply specific styles directly to HTML elements. We can center an element by using the utility classes of "margin" and "flex". This article will g
3 min read