目前,我正在学习如何用JavaScript和jquery编写代码。我使用的代码当你单击导航菜单时,它会向下滚动到另一个div中的特定div。但是,我试图将这个容器拆分成两个独立的容器,因此Left_Container
将从底部开始,而Right_Container
将从顶部开始。容器。当第一个容器下降时,另一个容器上升。我认为错误出在data-target
的某个地方,但我的知识不足以自己解决它。如果有人能帮助我,我将非常感激。
$(document).ready(function() {
$(".Menu li").on('click', function() {
$('.Left_Container').animate({
scrollTop: $($(this).data('target')).position().top + $('.Left_Container').scrollTop()
}, 'slow');
$('.Right_Container').animate({
scrollTop: $($(this).data('target')).position().top + $('.Right_Container').scrollTop()
}, 'slow');
});
});
.Wrapper {
display: flex;
position: relative;
width: 90vw;
height: 90vh;
background-color: purple;
}
.Menu {
position: relative;
width: 10vw;
height: 90vh;
background-color: blue;
}
.Menu li {
position: relative;
font-size: 4vw;
line-height: 5vw;
text-align: center;
color: white;
cursor: pointer;
list-style-type: none;
}
.Left_Container {
position: relative;
width: 43vw;
height: 90vh;
background-color: red;
overflow-y: hidden;
}
.Right_Container {
position: relative;
width: 43vw;
height: 90vh;
background-color: red;
overflow-y: hidden;
}
.Box {
position: relative;
width: 40vw;
height: 90vh;
background-color: purple;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrapper">
<div class="Menu">
<li data-target="#Left_A,Right_C">A</li>
<li data-target="#Left_B,Right_B">B</li>
<li data-target="#Left_C,Right_A">C</li>
</div>
<div class="Left_Container">
<div class="Box" id="Left_C">
Box C
</div>
<div class="Box" id="Left_B">
Box B
</div>
<div class="Box" id="Left_A">
Box A
</div>
</div>
<div class="Left_Container">
<div class="Box" id="Right_A">
Box A
</div>
<div class="Box" id="Right_B">
Box B
</div>
<div class="Box" id="Right_C">
Box C
</div>
</div>
</div>
PS:提前感谢。
顺祝商祺,
乔治S.
2条答案
按热度按时间eulz3vhy1#
这里有一个简单易懂的例子,两个div相互反向滚动。
字符串
f8rj6qna2#
我上周也遇到了这个问题。我找不到一个干净的vanilla JS解决方案。这就是为什么我创建了ScrollMirror包。
你可以在this related StackOverflow thread或GitHub README中看到如何使用它。
安装方式:
字符串
使用方法:
型