Zeige Bildlaufleiste oben und unten im Raster

Question

Ich möchte Bildlaufleiste auf beiden Seiten des Rasters oder Scrolling Raster bei Mausbewegung verwenden.

Ich habe unter dem Code versucht, aber untere Bildlaufleiste funktioniert, aber obere Bildlaufleiste nicht.

<script >  
 
        $(function() { 
 
         
 
        $(".wrapper1").scroll(function() { 
 
         $(".wrapper2") 
 
          .scrollLeft($(".wrapper1").scrollLeft()); 
 
        }); 
 
        
 
        $(".wrapper2").scroll(function() { 
 
         $(".wrapper1") 
 
          .scrollLeft($(".wrapper2").scrollLeft()); 
 
        }); 
 
        }); 
 

 
        $(window).load(function() { 
 
         $('.div1').css('width', $('.div2').outerWidth()); 
 
        }); 
 
       
 
     
 
    </script>

Code eingeben hier

Dies ist css von div

<style type="text/css"> 
    .wrapper1, .wrapper2 { 
     width: 900px; 
     border: none 0px RED; 
     overflow-x: scroll; 
     overflow-y: hidden; 
    } 

    .wrapper1 { 
     height: 20px; 
    } 

    /*.wrapper2 { 
     height: 200px; 
    }*/ 

    .div1 { 
     width: 1000px; 
     height: 20px; 
    } 

    .div2 { 
     width: 1000px; 
     background-color: #88FF88; 
     overflow: auto; 
    } 

    </style> 

Dies ist html

<div class="wrapper1"> 
 
    <div class="div1"> 
 
     &nbsp; 
 
     </div> 
 
    </div> 
 

 
    <div class="wrapper2"> 
 
    <div id="div2"> 
 
      <%-- my grid-- %>         
 
     </div> 
 
     </div>

Und das ist mein Ergebnis

Aber oben Sidebar nicht

funktioniert Wenn ich gleiche jQuery-Funktion in Browser-Konsole und geben Sie dann beide Schieber Arbeit richtig

Answer 1

Kleine einfügen Beobachtung: Die CSS für Div2 sollte durch ID-Selektor (#) sein.

#div2 { 
     width: 1000px; 
     background-color: #88FF88; 
     overflow: auto; 
    }