Advertisements
I have an HTML / CSS layout that is divided into the left and right sides. The left side always stays the same and should not be scrollable while the right side is scrollable. The issue I face is that the cursor is on the left side, the right side of a page cannot be scrolled down.
How do you achieve the possibility of scrolling down the right side of a page only while the cursor is on the left? Maybe it should be done using JavaScript instead of CSS only?
CSS and HTML code:
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
text-align: left;
font-family: Georgia, serif;
}
.leftSide {
background-color: #F7F1E5;
width: 45vw;
height: 100%;
position: fixed !important;
left: 0 !important;
z-index: 1 !important;
padding: 2rem 1.5rem 2.5rem;
}
.rightSide {
width: 50vw;
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
margin-left: 50%;
}
.section {
position: sticky;
top: 0;
display: inline-block;
width: 100%;
}
.section>* {
padding: 0 2rem 0 5rem;
}
.rightSideFirstSection {
background-color: #E7B10A;
}
.rightSideSecondSection {
background-color: #898121;
}
.rightSideThirdSection {
background-color: #4C4B16;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="container">
<header class="leftSide">
<h2 class="leftSideMessage">
If you scroll up here, the right side is not scrolled up.
</h2>
<p>How to achieve the possibility of scrolling down the right side only while the cursor is on the left side?</p>
</header>
<main class="rightSide">
<article>
<section class="section rightSideFirstSection">
<h2>Only when the cursor in on this side, scrolling down works</h2>
<p>
Once upon a time, in a land far, far away, there lived a mischievous monkey named Max. Max loved nothing more than to swing from tree to tree, stealing bananas and causing chaos wherever he went. One day, while on his usual banana raid, Max stumbled upon a magical tree that shimmered with every color of the rainbow. Curiosity getting the best of him, Max climbed the tree and discovered a secret stash of candy that would make Willy Wonka jealous. Delighted with his find, Max filled his pockets with candy and swung off to share his treasure with his fellow monkeys. The monkeys were overjoyed with their unexpected treat and danced around in a frenzy of sugar-fueled glee. From that day on, Max became known as the Candy King of the jungle, and every monkey in the land followed him wherever he went, hoping for another taste of his magical candy.
</p>
</section>
<section class="section rightSideSecondSection">
<p>
As the sun began to set, Max and his monkey friends decided to have a party to celebrate their newfound treasure. They built a bonfire, strung up colorful lights, and blasted their favorite music. Max even showed off his best dance moves, swinging from vines and doing flips in the air. The other monkeys cheered him on, and soon everyone was joining in on the dance party. They laughed and danced the night away, under the sparkling stars and the glow of the moon. As the night came to an end, Max and his friends felt exhausted but incredibly happy. They knew they had created a memory that would last a lifetime, and they couldn't wait for the next adventure that awaited them in the wild and wacky jungle.
</p>
</section>
<section class="section rightSideThirdSection">
<p >
In the wide open savannah, there lived a herd of zebras who loved nothing more than to run and play. They would kick up dust and race each other across the plains, their black and white stripes a blur in the wind. One day, they decided to have a game of soccer, using a rock as a ball. The rules were simple: whoever kicked the rock the farthest would be the winner. The zebras divided into two teams, and the game began. The players kicked and ran, dodging each other and trying to outsmart their opponents. The spectators, a group of curious giraffes, cheered and hooted as the game progressed. In the end, it was a tie, and both teams celebrated with a joyful gallop around the field. The zebras realized that it didn't matter who won or lost, what was important was the fun they had playing together. They walked off into the sunset, happy and content, knowing that they had shared a special moment of unity and joy.
</p>
</section>
</article>
</main>
</div>
</body>
</html>Demo – https://jsfiddle.net/erL95tfg/10/
>Solution :
If you let the scrollbar come from the body element, then you can scroll from anywhere.
body {
margin: 0;
}
.container {
text-align: left;
font-family: Georgia, serif;
}
.leftSide {
background-color: #F7F1E5;
width: 45vw;
height: 100%;
position: fixed !important;
left: 0 !important;
z-index: 1 !important;
padding: 2rem 1.5rem 2.5rem;
}
.rightSide {
width: 50%;
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
margin-left: 50%;
}
.section {
position: sticky;
top: 0;
display: inline-block;
width: 100%;
}
.section>* {
padding: 0 2rem 0 5rem;
}
.rightSideFirstSection {
background-color: #E7B10A;
}
.rightSideSecondSection {
background-color: #898121;
}
.rightSideThirdSection {
background-color: #4C4B16;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="container">
<header class="leftSide">
<h2 class="leftSideMessage">
If you scroll up here, the right side is not scrolled up.
</h2>
<p>How to achieve the possibility of scrolling down the right side only while the cursor is on the left side?</p>
</header>
<main class="rightSide">
<article>
<section class="section rightSideFirstSection">
<h2>Only when the cursor in on this side, scrolling down works</h2>
<p>
Once upon a time, in a land far, far away, there lived a mischievous monkey named Max. Max loved nothing more than to swing from tree to tree, stealing bananas and causing chaos wherever he went. One day, while on his usual banana raid, Max stumbled upon a magical tree that shimmered with every color of the rainbow. Curiosity getting the best of him, Max climbed the tree and discovered a secret stash of candy that would make Willy Wonka jealous. Delighted with his find, Max filled his pockets with candy and swung off to share his treasure with his fellow monkeys. The monkeys were overjoyed with their unexpected treat and danced around in a frenzy of sugar-fueled glee. From that day on, Max became known as the Candy King of the jungle, and every monkey in the land followed him wherever he went, hoping for another taste of his magical candy.
</p>
</section>
<section class="section rightSideSecondSection">
<p>
As the sun began to set, Max and his monkey friends decided to have a party to celebrate their newfound treasure. They built a bonfire, strung up colorful lights, and blasted their favorite music. Max even showed off his best dance moves, swinging from vines and doing flips in the air. The other monkeys cheered him on, and soon everyone was joining in on the dance party. They laughed and danced the night away, under the sparkling stars and the glow of the moon. As the night came to an end, Max and his friends felt exhausted but incredibly happy. They knew they had created a memory that would last a lifetime, and they couldn't wait for the next adventure that awaited them in the wild and wacky jungle.
</p>
</section>
<section class="section rightSideThirdSection">
<p >
In the wide open savannah, there lived a herd of zebras who loved nothing more than to run and play. They would kick up dust and race each other across the plains, their black and white stripes a blur in the wind. One day, they decided to have a game of soccer, using a rock as a ball. The rules were simple: whoever kicked the rock the farthest would be the winner. The zebras divided into two teams, and the game began. The players kicked and ran, dodging each other and trying to outsmart their opponents. The spectators, a group of curious giraffes, cheered and hooted as the game progressed. In the end, it was a tie, and both teams celebrated with a joyful gallop around the field. The zebras realized that it didn't matter who won or lost, what was important was the fun they had playing together. They walked off into the sunset, happy and content, knowing that they had shared a special moment of unity and joy.
</p>
</section>
</article>
</main>
</div>
</body>
</html>