Показать полосу прокрутки сверху и снизу сетки

Question

Я хочу использовать полосу прокрутки в обе стороны сетки или прокручивать сетку при перемещении мыши.

Я пробовал ниже код, но нижняя полоса прокрутки работает, но верхняя полоса прокрутки - нет.

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

введите код здесь

Это CSS из 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> 

Это HTML

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

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

И это мой результат

Но верхняя боковая панель не работает

Когда я вставить ту же функцию JQuery в консоли браузера и введите затем оба ползунка работать правильно

Answer 1

Small наблюдение: css для div2 должен быть с помощью селектора id (#).

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