Split page with two div tags into two parts, each with it's own scrollbar

user_11508332 0
Viewed 2488

I currently have a page in HTML with two <div> tags that split the page into two columns. The overall page can be scrolled up and down, but I wish for each column to have its own separate scroll bar making it so that one column can be scrolled all the way to the bottom and the other remaining at the top etc. Would anyone know how I'd be able to do this?

overflow scroll css html
3 Answers

Try this:

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style>
        .container {
            display: flex;
            flex-direction: row;
        }
        .left {
            height: 400px;
            display: block;
            width: 50%;
            background-color: green;
            overflow-y: scroll;
        }
        .right {
            height: 400px;
            background-color: red;
            display: block;
            width: 50%;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

You just need to add overflow-y: scroll; to your divs.

user_118120900

You can try something like this:

.main {         
     width:100%;          
   }
#firstColumn{
  height:100px;
  width: 45%;
  border:1px solid red;
  float:left;
   overflow-y:scroll;
}

#secondColumn{
  height:100px;
  width: 45%;
  margin-left:50%;
  border:1px solid blue;
  overflow-y:scroll;
}
    <div id="main">    
   
    <div id="firstColumn">
      When the API returns an image. I see more and more Image-Response GET APIs. With this term I mean: the API is called with a GET URL, and the response is a (JPG/PNG/GIF/WEBP/SVG) image, either directly or after a redirect. So the API can be used through a simple 
   </div> 
   <div id="secondColumn">When the API returns an image. I see more and more Image-Response GET APIs. With this term I mean: the API is called with a GET URL, and the response is a (JPG/PNG/GIF/WEBP/SVG) image, either directly or after a redirect. So the API can be used through a simple </div>
   </div>

user_35643590

Please try this :

Demo link: https://codepen.io/bhuvavaibhav2rs/pen/poJORxE

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

    <title>File compare</title>
    <style>
        .flex {
            display: flex;
            flex-direction: row;
        }

        .flex>.split {
            height: 100vh;
            overflow-y: scroll;
        }

        .gutter.gutter-horizontal {
            cursor: ew-resize;
        }

        .gutter {
            background-color: #eee;
            background-repeat: no-repeat;
            background-position: 50%;
        }

        .gutter.gutter-horizontal {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
        }

        .heading {
            padding: 15px;
            background: #eeeeee;
            text-align: center;
            font-weight: 800;
            color: #0062cc;
            letter-spacing: 2px;
        }
    </style>
</head>

<body>
    <div class="flex">
        <div id="one" class="split">
            <div class="heading">
                Column one
            </div>
            <h4>What is Lorem Ipsum?</h4>
            <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. I
                t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pas
                sages, and more recently with desktop publishing software like Aldus PageMaker including version
                s of Lorem Ipsum.</p>

            <h4>What is Lorem Ipsum?</h4>
            <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. I
                t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pas
                sages, and more recently with desktop publishing software like Aldus PageMaker including version
                s of Lorem Ipsum.</p>
            <h4>What is Lorem Ipsum?</h4>
            <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. I
                t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pas
                sages, and more recently with desktop publishing software like Aldus PageMaker including version
                s of Lorem Ipsum.</p>
            <h4>What is Lorem Ipsum?</h4>
            <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. I
                t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pas
                sages, and more recently with desktop publishing software like Aldus PageMaker including version
                s of Lorem Ipsum.</p>
        </div>
        <div id="two" class="split">
            <div class="heading">
                Column two
            </div>
            <h4>What is Lorem Ipsum?</h4>
            <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. I
                t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pas
                sages, and more recently with desktop publishing software like Aldus PageMaker including version
                s of Lorem Ipsum.</p>
            <h4>What is Lorem Ipsum?</h4>
            <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. I
                t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pas
                sages, and more recently with desktop publishing software like Aldus PageMaker including version
                s of Lorem Ipsum.</p>
            <h4>What is Lorem Ipsum?</h4>
            <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. I
                t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pas
                sages, and more recently with desktop publishing software like Aldus PageMaker including version
                s of Lorem Ipsum.</p>
            <h4>What is Lorem Ipsum?</h4>
            <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. I
                t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pas
                sages, and more recently with desktop publishing software like Aldus PageMaker including version
                s of Lorem Ipsum.</p>

        </div>
    </div>


    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.5.11/split.min.js"></script>
    <script>
        Split(['#one', '#two'], {
            sizes: [50, 50]
        });
    </script>
</body>

</html>

Codepen example link: https://codepen.io/bhuvavaibhav2rs/pen/poJORxE

For more information: https://split.js.org/

user_52337380
Related