Best way to css show scrollbar

Posted under CSS3 Course On By mohammed.mutawe

css show scrollbar

Sometimes we need to put a large text inside the page, and since writing texts depends on writing it to go down to a new line, we had to hide the text and control its descent through the scrollbar, and CSS provided us with this most wonderful tool to use in our HTML page.

 

Definition

Scrollbar is defined and used as follows:

overflow-x:hidden;

Where the focus is on the arrival of the x coordinates to the boundaries of the tag used in HTML, and when the contact occurs, the text will automatically go down with the activation of the scroll wheel, which often appears on the right side.

 

Benefits

We will mention the benefits of using scrollbar on our page which are:

  • Placing and forcing the elements not to be outside the tags.
  • Unobtrusively increasing the content of our web page, which gives visitors the choice to show or ignore texts.
  • Maintain a beautiful and consistent layout of the page and help with multiple selection.
  • Include too many inbound links on the page forcing visitors to stay on the site.
  • Include a scrollbar in any HTML content of any kind.
  • Multiple content scrollbar under main page scrollbar.

 

Example

Please, to understand CSS scrollbar well, copy the following codes and run it in your browser.

CSS

div{
    width:200px;
    height:400px;
    padding:10px;
    background-color:#EEE;
    border: 1px solid #CCC;
    overflow-x:hidden;
}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS scrollbar Overflow</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>
            1.This is Our main line first long sentences This is Our main line first long sentences<br/>
            2.This is Our main line first long sentences This is Our main line first long sentences<br/>
            3.This is Our main line first long sentences This is Our main line first long sentences<br/>
            4.This is Our main line first long sentences This is Our main line first long sentences<br/>
            5.This is Our main line first long sentences This is Our main line first long sentences<br/>
            6.This is Our main line first long sentences This is Our main line first long sentences<br/>
            7.This is Our main line first long sentences This is Our main line first long sentences<br/>
            8.This is Our main line first long sentences This is Our main line first long sentences<br/>
        </div>
    </body>

</html>