Scrollbars

A scrollbar can be used to move the viewing window right, left, up or down.

Seven Pseudo-elements can be used to implement the full scrollbar UI elements in webpages with the help of CSS are:-

: : -webkit-scrollbar : Address the background of the bar.
: : -webkit-scrollbar-track: For the empty space below the address bar.
: : -webkit-scrollbar-track-piece: The scrolling element does not cover the top element of the progress bar.
: : -webkit-scrollbar-thumb: Addresses the draggable scrolling element and it is also resizable.
: : -webkit-scrollbar-button: Direction buttons on the scrollbar.
: : -webkit-scrollbar-corner: Where two scrollbars meet,
: : -webkit-scrollbar-resizer:Draggable resizing handle that appears above the scrolling bar.

Setting -webkit-scrollbar is a good way to define the scroll bar to your webpage for

-webkit-scrollbars also have shorthand properties through which you can style your scrollbar’s

width : --px;
box-shadow: inset - - -px colourname;
border-radius: --px;
background: --px; or #555; etc.

Overflow attribute for Scrolling

CSS provides the “overflow: scroll;” attribute to show the horizontal and vertical scroll.

For horizontal scrolling: “ overflow-x: scroll;”
For vertical scrolling: “ overflow-y: scroll;”

E.g.
body {
overflow-x: scroll;
overflow-y: scroll;
}

Overflow will be discussed in detail in CSS Overflow Tutorial.

Example:

     
<html>
<html lang="en-US">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
</style>
</head>   

<body>

<h2>Knowledge2life</h2>
<p>Online website</p>
<p>Online website</p>
<p>Online website</p><p>Online website</p><p>Online website</p>
<p>Online website</p><p>Online website</p>
<p>Online website</p><p>Online website</p><p>Online website</p>
<p>Online website</p><p>Online website</p><p>Online website</p>
<p>Online website</p><p>Online website</p><p>Online website</p>
<p>Online website</p>
<p>Online website</p><p>Online website</p><p>Online website</p>

</body>
</html>
                    

OUTPUT:

Knowledge2life

Online website

INTERVIEW QUESTIONS

NEW UPDATES

CSS TOPICS

CSS Introduction

Font

Lists

Grid

Shadow

Buttons

Cursors

Css radial- gradient

CSS TOPICS

CSS Introduction

Font

Lists

Grid

Shadow

Buttons

Cursors

Css radial- gradient

Scrollbars

Scrollbars

Overflow attribute for Scrolling

Example:

OUTPUT:

Knowledge2life