CODEWITHSUNDEEP
javascriptreactjstailwind-css
user20182014
user20182014

Reputation:

How do i create scrollbar-y inside of Sidebar

enter image description here

How do I can create a scrollbar inside of this category section.

For example look at the youtube scrollbar. I want to create it using tailwind css.

enter image description here

Categories

    export const categories = [
  {
    name: "cars",
    image:
      "https://i.pinimg.com/750x/eb/47/44/eb4744eaa3b3ccd89749fa3470e2b0de.jpg",
  },
  {
    name: "fitness",
    image:
      "https://i.pinimg.com/236x/25/14/29/251429345940a47490cc3d47dfe0a8eb.jpg",
  },
  {
    name: "wallpapers",
    image:
      "https://i.pinimg.com/236x/03/48/b6/0348b65919fcbe1e4f559dc4feb0ee13.jpg",
  },
  {
    name: "websites",
    image:
      "https://i.pinimg.com/750x/66/b1/29/66b1296d36598122e6a4c5452b5a7149.jpg",
  },
  {
    name: "photo",
    image:
      "https://i.pinimg.com/236x/72/8c/b4/728cb43f48ca762a75da645c121e5c57.jpg"
];

Sidebar

      <div className="flex h-full flex-col gap-5 overflow-y-auto">
            {categories.slice(0, categories.length).map((item, id) => (
              <NavLink
                to={`/category/${item.name}`}
                className={({ isActive }) =>
                  isActive ? isActiveStyle : isNotActiveStyle
                }
                onClick={handleCloseSidebar}
                key={id}
              >
                <img
                  src={item.image}
                  alt="category-item"
                  className="w-8 rounded-full h-8 shadow-sm"
                />
                {item.name}
              </NavLink>
       ))}

Update: Added the code (only the categories section). I had a lot of code above and below of this, which I thought would be better to not add since they don't serve any purpose to the scrolling.!

Note: Only the categories section would be scrollable, I don't want the whole sidebar to be scrolled!

Upvotes: 0

Views: 58

Answers (1)

Bryan BERGER
Bryan BERGER

Reputation: 231

Try adding a height or max-height and set overflow-y on your elements container:

.elements-container {
 height: 300px;
 overflow-y: scroll;
}

If your list of elements exceed the container height, a scrollbar will appear.

Check out the MDN documentation here about overflow-y: https://developer.mozilla.org/fr/docs/Web/CSS/overflow-y

Upvotes: 1

Related Questions