镜像滚动效果开启。在两个容器之间单击

Question

目前，我正在学习如何用 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.

Answer 1

这是一个易于理解的示例，两个 div 相互反向滚动...

<!DOCTYPE html>
<head>

<style type="text/css">

.BoxStyle {
 position: absolute;
 left: 10px;
 width: 100px;
 height: 100px;
 overflow: auto;
 border: 1px solid black;
}

</style>
</head>

<body>


<div class="BoxStyle" id="Box1" onscroll="Box2.scrollTop=(Box2.scrollHeight-this.scrollTop);">box 1
<div style="position:absolute; top:500px;">.</div>
</div>

<br><br><br><br><br><br><br><br>

<div class="BoxStyle" id="Box2" onscroll="Box1.scrollTop=(Box1.scrollHeight-this.scrollTop);">box 2
<div style="position:absolute; top:500px;">.</div>
</div>

</body>
</html>

Answer 2

上周我也遇到了这个问题。我找不到一个干净的普通 JS 解决方案。这就是我创建包 ScrollMirror 的原因。

您可以在相关 StackOverflow 线程或 GitHub README 中了解如何使用它。

安装：

npm install scrollmirror

用途：

import ScrollMirror from 'scrollmirror';
new ScrollMirror(document.querySelectorAll('.scroller'));

镜像滚动效果开启。在两个容器之间单击

问题描述投票：0回答：2

2个回答

最新问题

镜像滚动效果开启。在两个容器之间单击

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2