20-CSS Scrollbars


There may be a situation arising when a web page content might be larger than the amount of space allocated to it in a given paragraph dimensions. For example, user provided width and height properties do not allow enough room to fit the content of your wish.

CSS provides a property called overflow” which tells the browser what to do if the box’s contents are larger than the box itself. –


  1. <html>
  2.   <head>
  3.   </head>
  5.   <style type="text/css">
  6.   .scrolling{
  7.   display:block;
  8.   border: 2px solid red;
  9.   padding:7px;
  10.   margin-top:7px;
  11.   width:320px;
  12.   height:50px;
  13.   overflow:scroll;
  14.   }
  15.   .auto{
  16.   display:block;
  17.   border:2px solid green;
  18.   padding:6px;
  19.   margin-top:6px;
  20.   width:350px;
  21.   height:60px;
  22.   overflow:auto;
  23.   }
  24.   </style>
  26.   <body>
  29.   <p>Example of scrolling:</p>
  30.   <div class="scrolling">
  31.   Happiness is experienced as a warm feeling. When we are happy we feel a sense of meaning and purpose in our lives. We are also more grateful, friendly and forgiving with others.
  32. We feel happiness when we feel we are achieving our goals, and especially so when we achieve a hard-won goal. Positive anticipation and attendant happiness happens when we predict that we will achieve our goals and feel confident about those predictions, perhaps because they have been right recently.
  33. Czikszentmihalyi (1992), in his long study of happiness identified what he called an 'autotelic' personality - a person who set their own goals, short- and long-term, and then had great fun in achieving them.
  34. Seligman (2002) defines three components of happiness as pleasure, engagement and meaning. He then expands this in Seligman (2011) to PERMA: Positive emotion, Engagement, Relationships, Meaning/purpose, and Accomplishment.
  35. Achor (2010) defines happiness as simply 'the joy we feel striving after our potential'. “This provides your horizontal as well as vertical scrollbars.”
  36.   </div>
  37.   <br />
  39.   <p>Example of auto value:</p>
  41.   <div class="auto">
  42. Happiness can be increased by things that remind us of happy things, from upbeat music to comedies. A particularly powerful trigger of happiness are words. Read a paragraph that contains words like 'new' and 'exciting' and 'wonderful' and you will start to feel good. Happiness also increases when we decrease exposure to things that make us unhappy.
  43. Happiness is sometimes contrasted with joy, with happiness being a state or mood and joy being the positive experience that is triggered by an event such as receiving good news or achieving a goal.
  44.   “This provides your horizontal as well as vertical scrollbars.”
  45.   </div>
  47. </body>
  48. </html>
Facebook Comments
Previous article19-CSS Rounded Corners
Next article21-CSS Table
Hello Itsourcecoders, welcome to itsourcecode.com. I'm Joken Villanueva, MIT a passionate Blogger, Programmer and a Hobbyist. I started Itsourcecode because I wanted to give back and Share all the learnings and knowledge I've learned in my career and I believe through this website I would be able to help and assist those newbie programmers in enhancing their skills from different programming languages. So let us all help each other by sharing our ideas!


Please enter your comment!
Please enter your name here