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

x33g5p2x  于 2024-01-07  发布在  jQuery
关注(0)|答案(2)|浏览(133)

目前,我正在学习如何用JavaScript和jquery编写代码。我使用的代码当你单击导航菜单时,它会向下滚动到另一个div中的特定div。但是,我试图将这个容器拆分成两个独立的容器,因此Left_Container将从底部开始,而Right_Container将从顶部开始。容器。当第一个容器下降时,另一个容器上升。我认为错误出在data-target的某个地方,但我的知识不足以自己解决它。如果有人能帮助我,我将非常感激。

  1. $(document).ready(function() {
  2. $(".Menu li").on('click', function() {
  3. $('.Left_Container').animate({
  4. scrollTop: $($(this).data('target')).position().top + $('.Left_Container').scrollTop()
  5. }, 'slow');
  6. $('.Right_Container').animate({
  7. scrollTop: $($(this).data('target')).position().top + $('.Right_Container').scrollTop()
  8. }, 'slow');
  9. });
  10. });
  1. .Wrapper {
  2. display: flex;
  3. position: relative;
  4. width: 90vw;
  5. height: 90vh;
  6. background-color: purple;
  7. }
  8. .Menu {
  9. position: relative;
  10. width: 10vw;
  11. height: 90vh;
  12. background-color: blue;
  13. }
  14. .Menu li {
  15. position: relative;
  16. font-size: 4vw;
  17. line-height: 5vw;
  18. text-align: center;
  19. color: white;
  20. cursor: pointer;
  21. list-style-type: none;
  22. }
  23. .Left_Container {
  24. position: relative;
  25. width: 43vw;
  26. height: 90vh;
  27. background-color: red;
  28. overflow-y: hidden;
  29. }
  30. .Right_Container {
  31. position: relative;
  32. width: 43vw;
  33. height: 90vh;
  34. background-color: red;
  35. overflow-y: hidden;
  36. }
  37. .Box {
  38. position: relative;
  39. width: 40vw;
  40. height: 90vh;
  41. background-color: purple;
  42. cursor: pointer;
  43. }
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  2. <div class="Wrapper">
  3. <div class="Menu">
  4. <li data-target="#Left_A,Right_C">A</li>
  5. <li data-target="#Left_B,Right_B">B</li>
  6. <li data-target="#Left_C,Right_A">C</li>
  7. </div>
  8. <div class="Left_Container">
  9. <div class="Box" id="Left_C">
  10. Box C
  11. </div>
  12. <div class="Box" id="Left_B">
  13. Box B
  14. </div>
  15. <div class="Box" id="Left_A">
  16. Box A
  17. </div>
  18. </div>
  19. <div class="Left_Container">
  20. <div class="Box" id="Right_A">
  21. Box A
  22. </div>
  23. <div class="Box" id="Right_B">
  24. Box B
  25. </div>
  26. <div class="Box" id="Right_C">
  27. Box C
  28. </div>
  29. </div>
  30. </div>

PS:提前感谢。
顺祝商祺,
乔治S.

eulz3vhy

eulz3vhy1#

这里有一个简单易懂的例子,两个div相互反向滚动。

  1. <!DOCTYPE html>
  2. <head>
  3. <style type="text/css">
  4. .BoxStyle {
  5. position: absolute;
  6. left: 10px;
  7. width: 100px;
  8. height: 100px;
  9. overflow: auto;
  10. border: 1px solid black;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div class="BoxStyle" id="Box1" onscroll="Box2.scrollTop=(Box2.scrollHeight-this.scrollTop);">box 1
  16. <div style="position:absolute; top:500px;">.</div>
  17. </div>
  18. <br><br><br><br><br><br><br><br>
  19. <div class="BoxStyle" id="Box2" onscroll="Box1.scrollTop=(Box1.scrollHeight-this.scrollTop);">box 2
  20. <div style="position:absolute; top:500px;">.</div>
  21. </div>
  22. </body>
  23. </html>

字符串

展开查看全部
f8rj6qna

f8rj6qna2#

我上周也遇到了这个问题。我找不到一个干净的vanilla JS解决方案。这就是为什么我创建了ScrollMirror包。
你可以在this related StackOverflow thread或GitHub README中看到如何使用它。
安装方式:

  1. npm install scrollmirror

字符串
使用方法:

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

相关问题