Прокрутите один div, чтобы вызвать другой div для прокрутки на другой скорости с jQuery - PullRequest
Новая
       45

Прокрутите один div, чтобы вызвать другой div для прокрутки на другой скорости с jQuery

0 голосов
/ 16 марта 2020

У меня есть два прокручиваемых 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/

Заранее спасибо.

1 Ответ

0 голосов
/ 16 марта 2020

Можете ли вы проверить это, это работает для меня.

JsFiddle link Нажмите здесь 

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