Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Scrollbars

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      Scrollbars

      Scrollbars are UI elements that allow users to navigate through long content that doesn't fit entirely within the visible area. They consist of vertical or horizontal bars with a draggable thumb, enabling users to move the content up and down or left to right.
      It is important to test your scrollbar styling in different browsers and devices to make sure it works as expected.

      How to style scrollbars

      • Create a container element, such as div, to hold the content and the scrollbar.
      • Set the height of the container element to a fixed value.
      • Add the overflow: auto property to the container element to enable the scrollbar.
      • Use the :-webkit-scrollbar pseudo-element to style the scrollbar.
      • Customize the scrollbars using CSS properties ( width, height, background-color, border, border-radius).

      CSS Scrollbar

      The following example demonstrates how to create a basic scrollbar using the -webkit-scrollbar CSS pseudo-element 
      <html>
      <head>
      <style>
         div {
            width: 370px;
            height: 120px;
            scrollbar-color: #8b8484 #ddd; 
            scroll-margin-block-end: 20px;
            background-color: #F1EFB0;
            overflow: auto; 
         }
         div::-webkit-scrollbar {
            width: 15px;
         }
         div::-webkit-scrollbar-track {
            background: #f1f1f1; 
         }
         div::-webkit-scrollbar-thumb {
            background: #888; 
         }
         div::-webkit-scrollbar-thumb:hover {
            background: #555; 
         }
         h3 {
            color: #DC4299;
         }
      </style>
      </head>
      <body>
         <div>
            <h3>Scrollbars using -webkit-scrollbar</h3>
            This block includes a large amount of content to demonstrate how scrollbars work when there is an overflow within an element box. 
            They consist of vertical or horizontal bars with a draggable thumb, enabling users to move the content up and down or left to right.
         </div>
      </body>
      </html>

      CSS Scrollbar - With Styling

      The following example demonstrates how to style scrollbars using the -webkit-scrollbar pseudo-element to customize their appearance by adding colors, width, border and border-radius 
      <html>
      <head>
      <style>
         div {
            width: 370px;
            height: 120px;
            background-color: #F1EFB0;
            overflow: auto; 
         }
         div::-webkit-scrollbar {
            width: 15px;
         }
         div::-webkit-scrollbar-track {
            background: #90e9e4;
         }
         div::-webkit-scrollbar-thumb {
            background: #e77f7f;
            border-radius: 10px;
            border: 3px solid yellow;
         }
         div::-webkit-scrollbar-thumb:hover {
            background: #da3e3e; 
         }
         .heading{
            color: #DC4299;
            text-align: center;
         }
      </style>
      </head>
      <body>
         <div>
            <h3 class="heading">Scrollbars using -webkit-scrollbar</h3>
            This block includes a large amount of content to demonstrate how scrollbars work when there is an overflow within an element box. 
            They consist of vertical or horizontal bars with a draggable thumb, enabling users to move the content up and down or left to right.
         </div>
      </body>
      </html>

      CSS Scrollbar - Related Properties

      Following is the list of CSS properties related to scrollbar:
      property
      value
      overflow-block
      Determines how the content of an element behaves when it is too wide to fit inside its container.
      overflow-inline
      Determines how content is displayed when it overflows the left and right edges of an element.
      overflow-x
      Display overflowing content in the horizontal direction.
      overflow-y
      Display overflowing content in the vertical direction.
      overflow
      Display overflowing content in the vertical direction.
      overflow-clip-margin
      Determines how far the content of an element can overflow its box before being clipped.
      scrollbar-color
      Sets the color of the scrollbar.
      scrollbar-width
      Sets the width of the scrollbar.
      scrollbar-gutter
      To reserve space for the scrollbar.
      scroll-behavior
      To ensure smooth scrolling when a user clicks on a link or scrolls through a page.
      scroll-margin
      Defines the margin of an element within the snap area.
      scroll-padding
      Defines the margin of an element within the snap area.
      scroll-snap-align
      Specifies how an element should be aligned within its scroll container.
      scroll-snap-stop
      To stop the the scroll container at snap points.
      scroll-snap-type
      Specifies how the scroll container snaps to snap positions.
      :-webkit-scrollbar
      To style the scrollbar in a variety of ways.