Browser Support

Menu

Tailwind CSS Scroll Behavior

Scroll behavior in CSS is a property used to define how scrolling behaves when triggered via user interactions or scripting. It allows developers to create smooth, automated scrolling or other predefined animations, making navigation and content accessibility much more user-friendly.

Tailwind CSS provides utility classes that make it simple to implement scroll behavior directly in your classes without writing custom CSS. These utilities unlock the potential of seamless transitions in layouts, resulting in better user experiences.

Let's delve into the nuances of scroll behavior in Tailwind CSS, following a structured and technical breakdown.

Class	Properties	Example
`scroll-auto`	`scroll-behavior: auto;`	`<div className="scroll-auto"></div>`
`scroll-smooth`	`scroll-behavior: smooth;`	`<div className="scroll-smooth"></div>`

Overview of Scroll Behavior

Adding the Scroll Behavior

To apply scroll behavior, use the scroll-smooth utility class. This class ensures smooth scrolling for any internal links pointing to a target within the page. Let's look at how this works:

This is a live editor. Play around with it!

export default function ScrollDemo() {
  return (
    <div className="scroll-smooth overflow-auto w-screen h-screen">
      {/* Smooth scroll anchor links */}
      <a
        href="#section-two"
        className="block text-blue-500 underline scroll-smooth p-4"
      >
        Go to Section Two
      </a>
      
      <div id="section-one" className="h-screen bg-gray-200">
        <h1 className="text-xl font-bold text-center">Section One</h1>
      </div>
      
      <div id="section-two" className="h-screen bg-gray-300">
        <h1 className="text-xl font-bold text-center">Section Two</h1>
      </div>
    </div>
  );
}

States and Responsiveness

Tailwind CSS empowers developers to apply scroll behavior utilities conditionally. These utilities can respond to specific states or adapt to different breakpoints for responsive designs.

Hover and Focus States

To apply scroll behavior on specific states like hover and focus, use state modifiers, e.g., hover:smooth-scroll.

This is a live editor. Play around with it!

export default function ScrollDemo() {
  return (
    <div className="hover:scroll-smooth overflow-auto w-screen h-screen">
      {/* Smooth scroll anchor links */}
      <a
        href="#section-two"
        className="block text-blue-500 underline scroll-smooth p-4"
      >
        Go to Section Two
      </a>
      
      <div id="section-one" className="h-screen bg-gray-200">
        <h1 className="text-xl font-bold text-center">Section One</h1>
      </div>
      
      <div id="section-two" className="h-screen bg-gray-300">
        <h1 className="text-xl font-bold text-center">Section Two</h1>
      </div>
    </div>
  );
}

Breakpoint Modifiers

To apply scroll behavior on specific screens- use breakpoint modifiers, e.g., sm, md, lg, etc.

This is a live editor. Play around with it!

export default function BreakpointScrollDemo() {
  return (
    <div className="w-screen h-screen overflow-auto lg:scroll-smooth">
      <div className="h-screen bg-gray-200">
        <a
          href="#content"
          className="text-blue-600 underline p-4"
        >
          Smooth Scroll on Larger Screens
        </a>
      </div>
      <div id="content" className="h-screen bg-gray-400">
        <h1 className="text-xl font-bold text-center">Content Section</h1>
      </div>
    </div>
  );
}

Real World Examples

Product Categories Navigator

A horizontal scrolling product category list with smooth scroll navigation.

This is a live editor. Play around with it!

const ProductCategoryScroll = () => {
  const categories = [
    {
      id: 1,
      name: "Electronics",
      image: "https://images.unsplash.com/photo-1498049794561-7780e7231661",
      alt: "Electronics category"
    },
    {
      id: 2,
      name: "Fashion",
      image: "https://images.unsplash.com/photo-1445205170230-053b83016050",
      alt: "Fashion category"
    },
    {
      id: 3,
      name: "Home & Garden",
      image: "https://images.unsplash.com/photo-1484154218962-a197022b5858",
      alt: "Home and Garden category"
    },
    {
      id: 4,
      name: "Sports",
      image: "https://images.unsplash.com/photo-1461896836934-ffe607ba8211",
      alt: "Sports category"
    },
    {
      id: 5,
      name: "Books",
      image: "https://images.unsplash.com/photo-1495446815901-a7297e633e8d",
      alt: "Books category"
    },
    {
      id: 6,
      name: "Beauty",
      image: "https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9",
      alt: "Beauty category"
    }
  ];

  return (
    <div className="w-full h-screen scroll-smooth overflow-auto">
      <div className="fixed top-4 left-4 z-10 space-y-2">
        {categories.map((category) => (
          <a
            key={category.id}
            href={`#category-${category.id}`}
            className="block px-4 py-2 bg-white shadow-md rounded-lg hover:bg-gray-50"
          >
            {category.name}
          </a>
        ))}
      </div>
      <div className="pl-40">
        {categories.map((category) => (
          <div
            key={category.id}
            id={`category-${category.id}`}
            className="h-screen flex items-center p-8"
          >
            <div className="bg-white rounded-xl shadow-lg p-6 w-full">
              <img
                src={category.image}
                alt={category.alt}
                className="w-full h-64 object-cover rounded-lg"
              />
              <h2 className="text-2xl font-bold mt-4">{category.name}</h2>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ProductCategoryScroll;

Timeline Journey

A vertical timeline with smooth scroll navigation between different life events.

This is a live editor. Play around with it!

const TimelineScroll = () => {
  const events = [
    {
      id: 1,
      year: "2018",
      title: "Company Founded",
      description: "Started our journey in a small garage",
      image: "https://images.unsplash.com/photo-1522071820081-009f0129c71c",
      alt: "Company founding moment"
    },
    {
      id: 2,
      year: "2019",
      title: "First Office",
      description: "Moved to our first official workspace",
      image: "https://images.unsplash.com/photo-1497366216548-37526070297c",
      alt: "First office space"
    },
    {
      id: 3,
      year: "2020",
      title: "Team Expansion",
      description: "Grew to 50 team members",
      image: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f",
      alt: "Team photo"
    },
    {
      id: 4,
      year: "2021",
      title: "International Launch",
      description: "Expanded to 10 countries",
      image: "https://images.unsplash.com/photo-1529156069898-49953e39b3ac",
      alt: "International expansion"
    },
    {
      id: 5,
      year: "2022",
      title: "Product Innovation",
      description: "Launched breakthrough product",
      image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f",
      alt: "Product launch"
    },
    {
      id: 6,
      year: "2023",
      title: "Sustainability Goals",
      description: "Achieved carbon neutrality",
      image: "https://images.unsplash.com/photo-1542601906990-b4d3fb778b09",
      alt: "Green initiatives"
    }
  ];

  return (
    <div className="h-screen bg-gray-100 scroll-smooth overflow-auto">
      <nav className="fixed top-0 right-4 h-screen flex items-center">
        <div className="bg-white rounded-lg shadow-lg p-4">
          {events.map((event) => (
            <a
              key={event.id}
              href={`#event-${event.id}`}
              className="block py-2 px-4 hover:bg-gray-50 rounded"
            >
              {event.year}
            </a>
          ))}
        </div>
      </nav>
      <div className="max-w-4xl mx-auto py-20">
        {events.map((event) => (
          <div
            key={event.id}
            id={`event-${event.id}`}
            className="min-h-screen flex items-center"
          >
            <div className="bg-white rounded-xl shadow-lg p-8 w-full">
              <span className="text-4xl font-bold text-blue-600">
                {event.year}
              </span>
              <h3 className="text-2xl font-bold mt-4">{event.title}</h3>
              <p className="mt-2 text-gray-600">{event.description}</p>
              <img
                src={event.image}
                alt={event.alt}
                className="w-full h-64 object-cover rounded-lg mt-6"
              />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default TimelineScroll;

Team Directory

A grid layout of team members with smooth scroll navigation to different departments.

This is a live editor. Play around with it!

const TeamDirectory = () => {
  const departments = [
    {
      id: 1,
      name: "Engineering",
      members: [
        {
          id: 1,
          name: "Alex Johnson",
          role: "Lead Engineer",
          image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
          alt: "Alex Johnson profile photo"
        },
        {
          id: 2,
          name: "Sarah Chen",
          role: "Frontend Developer",
          image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
          alt: "Sarah Chen profile photo"
        },
        {
          id: 3,
          name: "Michael Park",
          role: "Backend Developer",
          image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
          alt: "Michael Park profile photo"
        },
        {
          id: 4,
          name: "Emma Wilson",
          role: "DevOps Engineer",
          image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
          alt: "Emma Wilson profile photo"
        },
        {
          id: 5,
          name: "David Lee",
          role: "Mobile Developer",
          image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
          alt: "David Lee profile photo"
        },
        {
          id: 6,
          name: "Lisa Rodriguez",
          role: "QA Engineer",
          image: "https://images.unsplash.com/photo-1517841905240-472988babdf9",
          alt: "Lisa Rodriguez profile photo"
        }
      ]
    },
    // Add similar data structure for other departments...
  ];

  return (
    <div className="h-screen bg-gray-50 scroll-smooth overflow-auto">
      <header className="fixed top-0 w-full bg-white shadow-md z-10">
        <div className="max-w-7xl mx-auto px-4">
          <div className="flex space-x-8 py-4">
            {departments.map((dept) => (
              <a
                key={dept.id}
                href={`#dept-${dept.id}`}
                className="text-gray-600 hover:text-gray-900"
              >
                {dept.name}
              </a>
            ))}
          </div>
        </div>
      </header>
      <main className="pt-20">
        {departments.map((dept) => (
          <section
            key={dept.id}
            id={`dept-${dept.id}`}
            className="min-h-screen py-16"
          >
            <div className="max-w-7xl mx-auto px-4">
              <h2 className="text-3xl font-bold mb-12">{dept.name}</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {dept.members.map((member) => (
                  <div
                    key={member.id}
                    className="bg-white rounded-xl shadow-lg overflow-hidden"
                  >
                    <img
                      src={member.image}
                      alt={member.alt}
                      className="w-full h-64 object-cover"
                    />
                    <div className="p-6">
                      <h3 className="text-xl font-semibold">{member.name}</h3>
                      <p className="text-gray-600 mt-2">{member.role}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>
        ))}
      </main>
    </div>
  );
};

export default TeamDirectory;

Recipe Steps Navigator

A cooking recipe with step-by-step navigation and smooth scrolling.

This is a live editor. Play around with it!

const RecipeSteps = () => {
  const recipe = {
    title: "Classic Chocolate Cake",
    steps: [
      {
        id: "ingredients",
        title: "Ingredients",
        content: "2 cups flour, 2 cups sugar, 3/4 cup cocoa powder...",
        image: "https://images.unsplash.com/photo-1606313564200-e75d5e30476c",
        alt: "Baking ingredients laid out on table"
      },
      {
        id: "preparation",
        title: "Preparation",
        content: "Preheat oven to 350°F. Grease and flour two 9-inch cake pans...",
        image: "https://images.unsplash.com/photo-1556912167-f556f1f39fdf",
        alt: "Preparing cake batter"
      },
      {
        id: "baking",
        title: "Baking",
        content: "Pour batter into prepared pans. Bake for 30-35 minutes...",
        image: "https://images.unsplash.com/photo-1578985545062-69928b1d9587",
        alt: "Cake in the oven"
      },
      {
        id: "frosting",
        title: "Frosting",
        content: "Prepare chocolate frosting by mixing butter, cocoa, and powdered sugar...",
        image: "https://images.unsplash.com/photo-1578985545062-69928b1d9587",
        alt: "Frosting the cake"
      },
      {
        id: "decoration",
        title: "Decoration",
        content: "Decorate with chocolate shavings and fresh berries...",
        image: "https://images.unsplash.com/photo-1578985545062-69928b1d9587",
        alt: "Decorating the cake"
      },
      {
        id: "serving",
        title: "Serving",
        content: "Let cake rest for 30 minutes before serving...",
        image: "https://images.unsplash.com/photo-1578985545062-69928b1d9587",
        alt: "Serving the cake"
      }
    ]
  };

  return (
    <div className="max-w-4xl mx-auto p-6">
      <h2 className="text-3xl font-bold mb-8">{recipe.title}</h2>
      <div className="flex gap-6">
        <nav className="w-48 flex-none">
          <div className="sticky top-6 bg-white p-4 rounded-lg shadow-md">
            {recipe.steps.map((step) => (
              <a
                key={step.id}
                href={`#${step.id}`}
                className="block py-2 text-blue-600 hover:text-blue-800"
              >
                {step.title}
              </a>
            ))}
          </div>
        </nav>
        <div className="flex-1 overflow-auto scroll-smooth h-screen">
          {recipe.steps.map((step) => (
            <section
              key={step.id}
              id={step.id}
              className="mb-12 bg-white rounded-lg shadow-md overflow-hidden"
            >
              <img
                src={step.image}
                alt={step.alt}
                className="w-full h-48 object-cover"
              />
              <div className="p-6">
                <h3 className="text-xl font-bold mb-4">{step.title}</h3>
                <p className="text-gray-700">{step.content}</p>
              </div>
            </section>
          ))}
        </div>
      </div>
    </div>
  );
};

export default RecipeSteps;

News Feed Timeline

A news feed with date-based navigation and smooth scrolling between articles.

This is a live editor. Play around with it!

const NewsFeed = () => {
  const articles = [
    {
      id: 1,
      date: "2024-01-25",
      title: "Tech Innovation Summit",
      excerpt: "Leading tech companies gather to discuss future innovations...",
      image: "https://images.unsplash.com/photo-1531297484001-80022131f5a1",
      alt: "Tech summit conference hall"
    },
    {
      id: 2,
      date: "2024-01-24",
      title: "Sustainable Energy Breakthrough",
      excerpt: "New breakthrough in solar panel efficiency reaches record levels...",
      image: "https://images.unsplash.com/photo-1509391366360-2e959784a276",
      alt: "Solar panel installation"
    },
    {
      id: 3,
      date: "2024-01-23",
      title: "Global Health Initiative",
      excerpt: "WHO announces new global health program for developing nations...",
      image: "https://images.unsplash.com/photo-1584982751601-97dcc096659c",
      alt: "Healthcare professionals meeting"
    },
    {
      id: 4,
      date: "2024-01-22",
      title: "Space Exploration Update",
      excerpt: "NASA reveals plans for next-generation space telescope...",
      image: "https://images.unsplash.com/photo-1446776811953-b23d57bd21aa",
      alt: "Space telescope visualization"
    },
    {
      id: 5,
      date: "2024-01-21",
      title: "Economic Forum Results",
      excerpt: "Global economic forum concludes with new financial frameworks...",
      image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f",
      alt: "Economic forum meeting"
    }
  ];

  const dateGroups = [...new Set(articles.map(article => article.date))];

  return (
    <div className="max-w-4xl mx-auto p-6">
      <div className="flex gap-6">
        <nav className="w-32 flex-none">
          <div className="sticky top-6 bg-white p-4 rounded-lg shadow-md">
            <h2 className="text-xl font-bold mb-4">Jump to Date</h2>
            {dateGroups.map((date) => (
              <a
                key={date}
                href={`#${date}`}
                className="block py-2 text-blue-600 hover:text-blue-800"
              >
                {new Date(date).toLocaleDateString('en-US', { 
                  month: 'short', 
                  day: 'numeric' 
                })}
              </a>
            ))}
          </div>
        </nav>
        <div className="flex-1 scroll-smooth overflow-auto h-screen">
          {dateGroups.map((date) => (
            <section key={date} id={date} className="mb-12">
              <h3 className="text-lg font-semibold mb-4">
                {new Date(date).toLocaleDateString('en-US', {
                  weekday: 'long',
                  month: 'long',
                  day: 'numeric'
                })}
              </h3>
              <div className="space-y-6">
                {articles
                  .filter(article => article.date === date)
                  .map(article => (
                    <article key={article.id} className="bg-white rounded-lg shadow-md overflow-hidden">
                      <div className="md:flex">
                        <div className="md:flex-none md:w-48">
                          <img
                            src={article.image}
                            alt={article.alt}
                            className="h-48 w-full object-cover md:h-full"
                          />
                        </div>
                        <div className="p-6">
                          <h4 className="text-xl font-bold mb-2">{article.title}</h4>
                          <p className="text-gray-600">{article.excerpt}</p>
                          <a href="#" className="mt-4 inline-block text-blue-600 hover:text-blue-800">
                            Read more →
                          </a>
                        </div>
                      </div>
                    </article>
                  ))}
              </div>
            </section>
          ))}
        </div>
      </div>
    </div>
  );
};

export default NewsFeed;

Best Practices

Maintain Design Consistency

Establishing a consistent approach to scrolling styles helps unify the presentation of your application. By standardizing scroll utilities—such as scroll-auto or scroll-smooth, across different components, you create a consistent user experience. This ensures that transitions between pages or sections feel uniform, thereby reducing the cognitive load on users trying to navigate your interface.

Another strategy is to document which scroll-related classes should be used in specific contexts. Treat these recommendations as part of your project's style guide so every team member adheres to the same conventions.

Leverage Utility Combinations

Combining multiple Tailwind CSS utilities with Scroll Behavior enables you to achieve complex designs without compromising clarity. For example, pairing scroll-smooth with overflow-auto ensures that content within scrollable containers is easily accessible and transitions are visually pleasing. You can further enhance these designs by adding spacing utilities like p-* or m-* to create balanced layouts.

Another combination is using scroll-smooth with responsive modifiers, such as sm:overflow-auto or md:scroll-auto. This allows developers to tailor scrolling behavior to various screen sizes, ensuring an optimal user experience across devices.

Accessibility Considerations

Enhance Readability and Navigability

Scrolling choices can significantly influence how people engage with your content. Smooth scrolling (scroll-smooth) often improves readability by providing gentle transitions, preventing abrupt jumps that may confuse or disorient users. When combined with anchor links, smooth scrolling helps readers maintain a visual connection to where they came from.

Readable typography also matters. Pair scrolling utilities with accessible font sizes, line heights, and color contrasts to reduce strain on the eyes. For lengthy text blocks, consider providing ample spacing through Tailwind utilities like leading-relaxed or tracking-wide so your scrollable content doesn’t feel cramped. Proper spacing and alignment keep users focused on the core message.

Focus on High Contrast

Although scroll utilities don’t directly define contrast levels, they play a vital role in how content is displayed and revealed. As users scroll through sections, certain background and foreground colors come into view. If those sections lack sufficient contrast, it may compromise legibility, particularly for people with visual impairments.

To maintain clarity, combine scroll areas with Tailwind’s color classes in a mindful way. For instance, if you employ a scrollable side panel, ensure its background color offers a distinct contrast from the main content area. This approach keeps orientation straightforward, letting users differentiate the scrolling region from the rest of the layout.

Pointer Events Scroll Snap Type