[英]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.