How to create a scrollable div with fixed div on it's right and make both divs scrollable when-CodePudding

I want to create something like this:

https://www.gymshark.com/products/gymshark-vital-seamless-2-0-light-t-shirt-chilli-red-marl-ss22

You see, when on desktop you scroll down, the product details on right stay fixed while the images on the left scroll down until they reach the end and then the product details get scrolled as well.

Can you please tell me how can I create this effect with HTML, CSS or JavaScript?

CodePudding user response：

its all happening with css

position : sticky;
top : 0

here in this example left div is 200vh and right is 100vh so applying those two css to shorter div will keep it sticky while scrolling for the rest of the container and then as soon as container reach the end it will start scoll again

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Experiment</title>
</head>

<body>
    <div >this is header</div>
    <div >
        <div >
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet, nam assumenda numquam corporis repellendus
            rem esse itaque non vitae molestias aperiam ratione debitis quas hic sit iste quos dolore quo.
            Alias a veritatis repellat tenetur quo dolore voluptas, odit porro iure eum quia error quisquam quas
            delectus quibusdam totam velit sapiente similique quidem ex omnis exercitationem. Ratione minima architecto
            sint.
            Ipsum quibusdam rerum architecto asperiores itaque, maiores corrupti. Doloremque inventore, totam aliquam
            unde reprehenderit eos! Cupiditate deleniti voluptatum fuga totam vero, nulla a provident quam illum quas
            tempore impedit error.
            Nostrum sapiente veritatis consequatur exercitationem. Veniam accusantium dolor facilis ad quis sequi ullam
            aut unde blanditiis rem velit doloremque ducimus, voluptatibus consequuntur delectus, laboriosam possimus
            quas. Eligendi accusantium reprehenderit porro!
            Optio, eveniet! Qui quos tempora dolorem nihil, odit, perferendis laborum distinctio, id illo magni eaque
            labore corporis accusamus placeat quam aspernatur doloremque. Eaque accusantium maiores suscipit voluptatum
            expedita perspiciatis architecto!
            Sed laudantium modi fugit numquam dolorum repellendus, ex veniam saepe iure nobis! Animi tempore quo nulla,
            eveniet, architecto voluptatum, odio dignissimos temporibus molestias et sit. Dolor, illo. Recusandae, magni
            exercitationem.
            Autem quaerat soluta voluptatum quibusdam quas incidunt ducimus accusamus dolorum sed tempore nesciunt a
            possimus nostrum ullam delectus dolore consequuntur fugit voluptatem aspernatur, numquam rerum dignissimos
            quasi aliquid quae! Aliquid.
        </div>
        <div >
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto pariatur ratione voluptates porro, nemo
            aut cumque, aliquam assumenda libero placeat laboriosam modi harum doloremque ullam labore voluptatum? Et,
            nam saepe.
        </div>
    </div>
    <div >
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet, nam assumenda numquam corporis repellendus rem
        esse itaque non vitae molestias aperiam ratione debitis quas hic sit iste quos dolore quo.
        Alias a veritatis repellat tenetur quo dolore voluptas, odit porro iure eum quia error quisquam quas delectus
        quibusdam totam velit sapiente similique quidem ex omnis exercitationem. Ratione minima architecto sint.
        Ipsum quibusdam rerum architecto asperiores itaque, maiores corrupti. Doloremque inventore, totam aliquam unde
        reprehenderit eos! Cupiditate deleniti voluptatum fuga totam vero, nulla a provident quam illum quas tempore
        impedit error.
        Nostrum sapiente veritatis consequatur exercitationem. Veniam accusantium dolor facilis ad quis sequi ullam aut
        unde blanditiis rem velit doloremque ducimus, voluptatibus consequuntur delectus, laboriosam possimus quas.
        Eligendi accusantium reprehenderit porro!
        Optio, eveniet! Qui quos tempora dolorem nihil, odit, perferendis laborum distinctio, id illo magni eaque labore
        corporis accusamus placeat quam aspernatur doloremque. Eaque accusantium maiores suscipit voluptatum expedita
        perspiciatis architecto!
        Sed laudantium modi fugit numquam dolorum repellendus, ex veniam saepe iure nobis! Animi tempore quo nulla,
        eveniet, architecto voluptatum, odio dignissimos temporibus molestias et sit. Dolor, illo. Recusandae, magni
        exercitationem.
        Autem quaerat soluta voluptatum quibusdam quas incidunt ducimus accusamus dolorum sed tempore nesciunt a
        possimus nostrum ullam delectus dolore consequuntur fugit voluptatem aspernatur, numquam rerum dignissimos quasi
        aliquid quae! Aliquid.
    </div>
</body>
<link rel="stylesheet" href="./styles.css">
<script type="module" src="./main.js"></script>
<script src="https://cdn.tailwindcss.com"></script>

</html>