How to create a scrollable div with fixed div on it's right and make both divs scrollable when the scrollable div reaches the end

Question

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?

Answer 1

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 class="header p-5 bg-green-500 text-white text-2xl text-center">this is header</div> <div class="scrollBody flex items-start"> <div class="each overflow-hidden p-5 w-[70%] h-[200vh] bg-green-200"> 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 class="each overflow-hidden p-5 w-[30%] h-[100vh] bg-green-400 sticky top-0"> 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 class="each overflow-hidden p-5 w-[100%] h-[200vh] bg-purple-500"> 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>

How to create a scrollable div with fixed div on it's right and make both divs scrollable when the scrollable div reaches the end

Question

1 answers

solution1
1 ACCPTED 2022-08-09 22:41:21

How to create a scrollable div with fixed div on it's right and make both divs scrollable when the scrollable div reaches the end

Question

1 answers

solution1 1 ACCPTED 2022-08-09 22:41:21

solution1
1 ACCPTED 2022-08-09 22:41:21