英文:
How to scroll down the right side of a page only while the cursor is on the left side?
问题
我有一个分成左右两侧的HTML/CSS布局。左侧始终保持不变，不可滚动，而右侧可以滚动。我遇到的问题是，当光标位于左侧时，页面的右侧无法向下滚动。
如何实现只有在光标位于左侧时才能向右侧滚动的可能性？也许应该使用JavaScript 而不是仅使用CSS？
CSS和HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="container">
<header class="leftSide">
<h2 class="leftSideMessage">
如果您在此处向上滚动，右侧不会向上滚动。
</h2>
<p>如何实现只有在光标位于左侧时才能向右侧滚动的可能性？</p>
</header>
<main class="rightSide">
<article>
<section class="section rightSideFirstSection">
<h2>只有当光标在此侧时，向下滚动才有效</h2>
<p>
从前，有一个生活在遥远大陆的顽皮猴子，名叫Max。Max最喜欢荡秋千，从树上偷香蕉，到处制造混乱。有一天，在他常去的地方偷香蕉时，Max偶然发现了一颗闪烁着七彩光芒的神奇树。好奇心战胜了他，Max爬上树，发现了一个秘密的糖果储藏室，足以让威利·旺卡都嫉妒。Max兴奋地把口袋装满糖果，然后荡秋千跳下去，与其他猴子分享他的宝藏。猴子们都为这意外的美食派对而欢呼雀跃，陷入了糖果引发的狂欢。从那天起，Max成为了丛林的糖果之王，丛林中的每只猴子都跟随着他，希望再次尝到他的神奇糖果。
</p>
</section>
<section class="section rightSideSecondSection">
<p>
当太阳开始下山时，Max和他的猴子朋友决定举行一个庆祝他们新发现宝藏的派对。他们生起篝火，挂起五彩斑斓的灯光，放起了他们最喜欢的音乐。Max还展示了他最棒的舞蹈动作，荡秋千，翻飞。其他猴子为他加油打气，很快每个人都加入了舞蹈派对。他们在闪烁的星星下和月亮的光芒下尽情欢笑和跳舞。当夜晚结束时，Max和他的朋友感到疲惫但非常快乐。他们知道他们创造了一个将持续一生的记忆，迫不及待地期待着丛林中等待他们的下一个冒险。
</p>
</section>
<section class="section rightSideThirdSection">
<p>
在广阔的大草原上，有一群斑马，他们最喜欢奔跑和嬉戏。它们踢起尘土，穿越平原，它们的黑白条纹在风中变得模糊不清。有一天，它们决定踢足球比赛，用一块石头当足球。规则很简单：谁能把石头踢得最远，谁就是赢家。斑马们分成两队，比赛开始了。选手踢球、奔跑，躲避对方，试图智胜对手。看台上，一群好奇的长颈鹿为他们欢呼加油。最后，比赛以平局结束，两队都欢欣鼓舞地绕着场地奔跑。斑马们意识到胜负并不重要，重要的是他们在一起玩耍时的快乐。它们走进夕阳，快乐满足，知道他们分享了一刻团结和快乐的特殊时刻。
</p>
</section>
</article>
</main>
</div>
</body>
</html>
.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;
}
<details>
<summary>英文:</summary>
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.
[![enter image description here][1]][1]
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:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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>
<!-- language: lang-css -->
.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;
}
<!-- end snippet -->
Demo - [https://jsfiddle.net/erL95tfg/10/][2]
[1]: https://i.stack.imgur.com/eP55w.png?s=256
[2]: https://jsfiddle.net/erL95tfg/10/
[3]: https://michaelpumo.com
</details>
# 答案1
**得分**: 2
如果你让滚动条来自 body 元素，那么你可以从任何地方滚动。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="container">
<header class="leftSide">
<h2 class="leftSideMessage">
如果你在这里向上滚动，右边不会滚动。
</h2>
<p>如何在光标在左边的情况下实现只能向右边滚动的可能性？</p>
</header>
<main class="rightSide">
<article>
<section class="section rightSideFirstSection">
<h2>只有当光标在这一侧时，向下滚动才有效</h2>
<p>
很久以前，在一个遥远的地方，住着一只调皮的猴子，名叫马克斯。马克斯最喜欢的事情就是从一棵树跳到另一棵树，偷香蕉并在哪里制造混乱。有一天，在他平常的香蕉突袭中，马克斯偶然发现了一棵闪烁着七彩光芒的神奇树。好奇心战胜了他，马克斯爬上了树，发现了一个秘密的糖果储藏室，足以嫉妒威利·旺卡。马克斯高兴地把口袋装满了糖果，然后挥动着摇摆离开，与他的猴子朋友分享了他的财宝。猴子们对意外的美味感到高兴，兴奋地在糖的滋养下陷入了狂糖狂欢。从那天起，马克斯成为了丛林的糖果国王，每只猴子都跟着他走，希望再次品尝他的神奇糖果。
</p>
</section>
<section class="section rightSideSecondSection">
<p>
随着太阳开始下山，马克斯和他的猴子朋友决定举行一场庆祝新发现财宝的派对。他们生起篝火，挂起五光十色的灯光，响起了他们最喜欢的音乐。马克斯甚至展示了他最棒的舞蹈动作，摇摆在藤蔓上，空中翻转。其他猴子为他加油打气，很快每个人都加入了舞会。他们在璀璨的星星和月光的照耀下，欢笑和跳舞到天亮。当夜晚结束时，马克斯和他的朋友感到筋疲力尽，但非常幸福。他们知道他们创造了一段将持续一生的记忆，他们迫不及待地期待着等待他们在疯狂和疯狂的丛林中的下一个冒险。
</p>
</section>
<section class="section rightSideThirdSection">
<p>
在广阔的大草原上，住着一群斑马，他们最喜欢的事情就是奔跑和嬉戏。他们会踢起尘土，穿越平原，他们的黑白条纹在风中模糊不清。有一天，他们决定踢足球比赛，使用一块石头作为足球。规则很简单：谁能踢得最远，谁就是赢家。斑马分成两队，比赛开始了。球员们踢球并奔跑，互相躲避，试图智胜对手。一群好奇的长颈鹿观众为比赛欢呼和叫喊。最后，打成了平局，两队都以欢快的奔跑庆祝。斑马们意识到重要的不是谁赢谁输，而是他们一起玩得多开心。他们欣然走向日落，快乐满足，知道他们分享了一段特别的团结和快乐的时刻。
</p>
</section>
</article>
</main>
</div>
</body>
</html>
英文:
If you let the scrollbar come from the body element, then you can scroll from anywhere.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论