滚动一个 div 以触发另一个 div 以使用 jQuery 以不同的速度滚动

Question

我有两个可滚动的 div，div A 和 div B。

我希望当我滚动 div A 时，div B 也会向同一方向滚动，但速度更慢。 我还希望能够在将鼠标悬停在 div B 上时独立滚动它。

我已经在 jquery 中找到了一个解决方案，如这个小提琴所示： https : //jsfiddle.net/j4nuxq97/11/

 var position = $(window).scrollTop(); $(".div-a").scroll(function() { var scroll = $(".div-a").scrollTop(); if (scroll > position) { var y = $(".div-b").scrollTop(); $(".div-b").scrollTop(y + 20); } else { var y = $(".div-b").scrollTop(); $(".div-b").scrollTop(y - 20); } position = scroll; });

 div{ height:200px; width:100px; overflow:scroll; display:inline-block; margin-left:30px; scroll-behavior: smooth; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="div-a"> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br> </div> <div class="div-b"> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br> </div>

问题是这是一个非常不愉快的动画：

• div B 总是在 div A 之后移动，而不是同时移动

• 动画真的很生涩，移动的量根据滚动 div A 的速度而变化

任何人都可以推荐使这种感觉更流畅，更接近本网站动画感觉的最佳方法： http : //spassky-fischer.fr/

提前致谢。

Answer 1

你能检查一下它对我有用吗？

JsFiddle 链接点击这里

 <style> div{ height:200px; width:100px; overflow:scroll; display:inline-block; margin-left:30px; scroll-behavior: smooth; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="div-a" id="col" onscroll="OnScroll(this)"> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br> </div> <div class="div-b" id="col1"> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br> </div> <script> function OnScroll(div) { var div1 = document.getElementById("col1"); div1.scrollTop = div.scrollTop; } </script>