Skip to content
Search

CSS:scrollbar

lastmod 2021-07-13created 2021-07-134 edits

Notes on CSS scrollbars.

Categories

When no scrolling is needed at all

th, td {
  overflow: hidden;
}

When you want only the horizontal axis to scroll

th, td {
  overflow-y: hidden;
  overflow-x: auto; // 스크롤 있는 경우에만 표시
}

When you want to remove only the scrollbar but keep scrolling

th, td {
  -ms-overflow-style: none; // IE에서 스크롤바 감춤
  &::-webkit-scrollbar { 
    display: none !important; // 윈도우 크롬 등
  }
}

Applying a custom style

Only possible on webkit-based browsers.

.scrollbar {
    &::-webkit-scrollbar {
        width: 3px;
        background: none;
    }
    &::-webkit-scrollbar-thumb {
        background: #f8f7fb;
        opacity: .4;
    }
    &::-webkit-scrollbar-track {
        background: none;
    }
}

See also

Favorite site

author Zer0 sitemap