How to Make Scrollbar Visible Only when Necessary in HTML and CSS?

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        overflow-y: auto; /* Enable vertical scrolling */
        width: 250px;
      }

/* Hide scrollbar by default */
      ::-webkit-scrollbar {
        width: 0.5em;
        background-color: #f5f5f5;
      }

/* Make scrollbar visible when needed */
      ::-webkit-scrollbar-thumb {
        background-color: #000000;
      }

/* Make scrollbar track visible when needed */
      ::-webkit-scrollbar-track {
        background-color: #f5f5f5;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem
      ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem
      ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem
      ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print.
    </p>
  </body>
</html>