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

Question

I have two scrollable divs, div A and div B.

I'd like that when I scroll div A, div B also scrolls in the same direction but more slowly. I'd also like to be able to scroll div B independently while hovering over it.

I've worked out a solution in jquery, as shown in this fiddle: 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>

the problem is that it's a really unpleasant animation:

• div B always moves after div A has, rather than at the same time

• the animation is really jerky, and the amount moved varies based on the speed at which div A is scrolled

Can anyone recommend the best way to make this feel smoother, and closer to the way the animation on this site feels: http://spassky-fischer.fr/

Thanks in advance.

Answer 1

Can you please check this it's working for me.

JsFiddle link Click here

 <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>