簡體   English   中英

滾動一個 div 以觸發另一個 div 以使用 jQuery 以不同的速度滾動

[英]Scroll one div to trigger another div to scroll at a different speed with jQuery

我有兩個可滾動的 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/

提前致謝。

你能檢查一下它對我有用嗎?

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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM