Прокрутите div, используя колесо прокрутки над другим div

Question

Скажем, у меня есть 2 divs бок о бок. Оба имеют размер 400px x 400px и имеют переполнение, установленное в auto. Содержимое внутри выше 400 пикселей, поэтому есть вертикальные полосы прокрутки.

Когда мышь находится над div слева, и пользователь использует колесико мыши для прокрутки, я хочу, чтобы прокручивался другой div, и наоборот.

Так что, когда пользователь использует колесико мыши в определенной области, я хочу контролировать прокрутку другой области соответственно.

Возможно ли это с помощью jQuery?

Answer 1

Чтобы прокрутить прокрутку любого из них, просто прокрутите любой из них. Просто сделайте это:

http://jsfiddle.net/sxP3m/

$(function() { 
    $('#left').scroll(function() { 
     $('#right').scrollTop($(this).scrollTop()); 
    }); 
    $('#right').scroll(function() { 
     $('#left').scrollTop($(this).scrollTop()); 
    }); 
}); 

Однако, если вы только хотите другой DIV для прокрутки, все становится намного Tricker. Это один хак, который может работать для вас:

http://jsfiddle.net/krv4s/4/

$(function() { 
    $('#left').clone().attr('id', 'leftClone').css({ 
     'position': 'absolute', 
      'top': $('#left').position().top, 
      'left': $('#left').position().left, 
     opacity: 0 
    }).appendTo('body'); 
    $('#right').clone().attr('id', 'rightClone').css({ 
     'position': 'absolute', 
      'top': $('#right').position().top, 
      'left': $('#right').position().left, 
     opacity: 0 
    }).appendTo('body'); 
    $('#leftClone').scroll(function() { 
     $('#right').scrollTop($(this).scrollTop()); 
    }); 
    $('#rightClone').scroll(function() { 
     $('#left').scrollTop($(this).scrollTop()); 
    }); 
}); 

Answer 2

посмотреть на THIS ...

Я все еще работаю над этим, но я думал, что это будет полезно для вас.

вот код:

JQuery:

var s=0; 
$('#first').scroll(function(e){ 
    e.preventDefault(); 
    var tgt='#second'; 
    if(s==0){ 
    s=1; 
    $(''+tgt).animate({ 
     scrollTop: $(this).scrollTop(), 
     scrollLeft: $(this).scrollLeft() 
    }, 10,function(){ 
    s=0; 
    }); 
    } 
}); 

$('#second').scroll(function(e){ 
    e.preventDefault(); 
    var tgt='#first'; 
    if(s==0){ 
     s=1; 
    $(''+tgt).animate({ 
     scrollTop: $(this).scrollTop(), 
     scrollLeft: $(this).scrollLeft() 
    }, 10,function(){ 
    s=0; 
    }); 
    } 
}); 

CSS:

div{ 
    width:400px; 
    height:400px; 
    background:#f00; 
    overflow:auto; 
    float:left; 
} 

HTML:

<div id="first"> 
    <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> 
<br><hr>   <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> 
     <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> 
<br><hr>   <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> 


</div> 

<div id="second" style="background:#0f0;"> 
     <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> 
<br><hr>   <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> 
     <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> 
<br><hr>   <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> 


</div> 

тес ted in chrome, FireFox и Safari.

надеюсь, что это вам поможет. привет!

также если вы придумали более эффективный метод; пожалуйста, обновите эту скрипку и прокомментируйте ссылку.

Answer 3

Если вы хотите прокрутки (при наведении курсора мыши ход) один DIV вместо другого, вы можете попробовать это:

Live example

$("#inner").hover(function() { 
    $(document).bind('mousewheel DOMMouseScroll',function(e){ 

     var isScrollInInnerDiv=$(e.target).is("#inner"); 
     /* or any other condition, like this: 
      e.target.className.indexOf !== undefined && e.target.className!=null &&  
      e.target.className.indexOf("v-table") > -1; 
        */ 
     if (isScrollInInnerDiv) { 
      if (e.preventDefault) { 
        e.preventDefault(); 
      } 
      e.stopPropagation(); 
      var delta = (e.originalEvent.wheelDelta || -e.originalEvent.detail); 
      //make scroll size reasonably big 
      if (delta>0 && delta<120) 
        delta=120; 
      if (delta<0 && delta>-120) 
        delta=-120; 
      var outerDiv=$("#outer"); 
      outerDiv.scrollTop(outerDiv.scrollTop()-delta); 
     } 
    }); 
    }, function() { 
     $(document).unbind('mousewheel DOMMouseScroll'); 
    });