Как сделать скролл одного блока при нахождении мыши на другом?

Question

[Владимир]

Здравствуйте, Уважаемые разработчики!

Столкнулся с очень необычной задачей, реализацию которой хочет увидеть клиент.

Блок всегда подстраивается под высоту и ширину экрана. Левая часть остается фиксированной при скролле, а правая часть, соответственно скролится, но скролл происходит только тогда, когда указатель мыши находится на данном блоке (правой части), а нужно чтобы этот блок прокручивался и в том случае, если указатель мыши находится и на левой части.
Можно сделать, чтобы блоки были одинаковой высоты, и тогда все будет отлично, но так не пойдет, нужно чтобы левая часть всегда была равна высоте viewport.

Может кто-то сталкивался с подобным, либо знает какое-либо решение. Буду очень благодарен за подсказки.

Answer 1

[display: block]

$('.left').on('mousewheel', function(e){
  var delta = e.originalEvent.wheelDelta;
  var current = $('.right').scrollTop();
  $('.right').scrollTop(current-delta);
});

codepen.io/anon/pen/aJVoNY

Comments

[Владимир]

Спасибо большое, это то что нужно!

[Владимир]

У Вас случайно еще нет решения для Firefox? Везде работает, даже в ie8, а в firefox не хочет. Перечитал уже кучу всего, но кроссбраузерно сделать не могу.

[display: block]

Владимир:
codepen.io/anon/pen/aJVoNY

$('.left').on('mousewheel DOMMouseScroll', function(e){
  e = e.originalEvent;
  if('wheelDelta' in e)
    var delta = e.wheelDelta;
  else 
    var delta = -15*e.detail;
  var current = $('.right').scrollTop();
  $('.right').scrollTop(current-delta);
});

[Владимир]

qork: И снова Вы мне помогли, спасибо Вам, добрый и умный человек))