Free Source Code and Tutorials

Custom Search

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
(Visited 3 times, 1 visits today)
Share this

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked * © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!

%d bloggers like this: