Menu Close

How To Create Scroll Box In Html

Jennifer
Scroll box

Here, we will see how to create a scroll box in html. If the content of the page is too large to fit in, the content box grows scroll bars with the help of overflow css property. For this we just need to add overflow property to the div of the content. Also we can change the size and color of the scroll bars via css. Follow the below examples.

Basic scroll box in html:

Follow the below codes to create a basic scroll box to your content.

<!DOCTYPE html>
<html>
<head>
    <title>Basic scroll box in html</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .scroll-box{
            height:200px;
            width:280px;
            border:1px solid #333;
            font:16px Arial, Serif;
            overflow:auto;
            margin: 20px;
            padding: 20px;
        }
    </style>
</head>
<body>		
    <div class="scroll-box">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
    </div>
</body>
</html>

Html scroll box with colors example:

In this example, we just need to add background and color properties to the div of the content. Follow the below codes to create a scroll box with colors.

<!DOCTYPE html>
<html>
<head>
    <title>Html scroll box with colors example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .scroll-box{
            height:200px;
            width:280px;
            border:1px solid #333;
            font:16px Arial, Serif;
            overflow:auto;
            margin: 20px;
            padding: 20px;
            background: #097969;
            color: #fff;
        }
    </style>
</head>
<body>		
    <div class="scroll-box">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</body>
</html>

Adding Scroll box to the image:

For some web pages, images also need a scroll bar. For the below example, we have added the overflow property to the image.

<!DOCTYPE html>
<html>
<head>
    <title>Adding Scroll box to the image</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .scroll-box{
            height:200px;
            width:280px;
            overflow:auto;
            margin: 20px;
            display: inline-block;
        }
    </style>
</head>
<body>		
    <div class="scroll-box">
        <img src="c1.jpg" alt="Scroll box to the image"> 
    </div>
</body>
</html>

Border property to the scroll box:

Here, we just added the border property to the div. Follow the below codes.

<!DOCTYPE html>
<html>
<head>
    <title>Border property to the scroll box</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .scroll-box{
            height:200px;
            width:280px;
            border:5px solid #097969;
            font:16px Arial, Serif;
            overflow:auto;
            margin: 20px;
            padding: 20px;
        }
    </style>
</head>
<body>		
    <div class="scroll-box">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
    </div>
</body>
</html>

Horizontal scroll box:

Here, we have added only overflow-x property to the div. Follow the below example.

<!DOCTYPE html>
<html>
<head>
    <title>Horizontal scroll box example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .scroll-box{
            height:200px;
            width:280px;
            border:5px solid #097969;
            font:16px Arial, Serif;
            overflow-x:auto;
            margin: 20px;
            padding: 20px;
        }
        .scroll-box p{
            width:300%;
        }
    </style>
</head>
<body>		
    <div class="scroll-box">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>
</body>
</html>
Popular Posts
Total Views: 513
Posted in CSS, HTML, Web Technologies
Tagged , , , , , , ,

You can also read...