0
183
Vistas¿Cómo desplazar elementos simultáneamente cuando están dentro de una tabla?
Tengo una tabla enorme en la que quiero introducir el desplazamiento de los datos. No quiero separar en dos tablas, sino desplazar los datos simultáneamente. Aquí hay un código simplificado en JSFiddle y más abajo:
https://jsfiddle.net/oy4pdz8t/7/
<table> <tr> <td>fixed</td> <td> <div id="scrolling1" class=" linked"> <div class="data">1</div> <div class="data">2</div> <div class="data">3</div> <div class="data">4</div> <div class="data">5</div> </div> </td> </tr> <tr> <td>fixed</td> <td> <div id="scrolling2" class=" linked"> <div class="data">1</div> <div class="data">2</div> <div class="data">3</div> <div class="data">4</div> <div class="data">5</div> </div> </td> </tr> </table>El CSS es el siguiente:
#scrolling1{ display: flex; overflow: auto; width: 100px; background: yellow; height: 50px; align-items: center; } #scrolling2{ display: flex; overflow: auto; width: 100px; background: green; height: 50px; align-items: center; } .data{ display: flex; flex: 0 0 40px; background: red; }Y el jQuery es:
$(function(){ $('.linked').scroll(function(){ $('.linked').scrollTop($(this).scrollTop()); }) })¿Es posible hacer que las dos secciones de desplazamiento se desplacen simultáneamente? Como mencioné anteriormente, no quiero tener que tocar la estructura de la mesa, ya que sería una pesadilla.
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Debe usar scrollLeft() en lugar de scrollTop() . scrollLeft() es para desplazamiento horizontal mientras que scrollTop() es para desplazamiento vertical.
$(function() { $('.linked').scroll(function() { $('.linked').scrollLeft($(this).scrollLeft()); }) }) #scrolling1 { display: flex; overflow: auto; width: 100px; background: yellow; height: 50px; align-items: center; } #scrolling2 { display: flex; overflow: auto; width: 100px; background: green; height: 50px; align-items: center; } .item { display: flex; flex: 0 0 40px; background: red; } <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <table> <tr> <td>fixed</td> <td> <div id="scrolling1" class=" linked"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> </td> </tr> <tr> <td>fixed</td> <td> <div id="scrolling2" class=" linked"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> </td> </tr> </table>
·
Juan Pablo Isaza
Denunciar
0
$('.linked').on('scroll', function() { var y = $(this).scrollLeft(); $('.linked').scrollLeft(y); }); #scrolling1{ display: flex; overflow: auto; width: 100px; background: yellow; height: 50px; align-items: center; } #scrolling2{ display: flex; overflow: auto; width: 100px; background: green; height: 50px; align-items: center; } .data{ display: flex; flex: 0 0 40px; background: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>fixed</td> <td> <div id="scrolling1" class="linked"> <div class="data">1</div> <div class="data">2</div> <div class="data">3</div> <div class="data">4</div> <div class="data">5</div> </div> </td> </tr> <tr> <td>fixed</td> <td> <div id="scrolling2" class="linked"> <div class="data">1</div> <div class="data">2</div> <div class="data">3</div> <div class="data">4</div> <div class="data">5</div> </div> </td> </tr> </table>Puede usar las funciones de desplazamiento de jQuery.
Explicación:
| Línea | Explicación |
|---|---|
$('.linked').on('scroll', function() { | Activar al desplazarse por cualquiera de los .linked s |
var y = $(this).scrollLeft(); | Guardar la posición de desplazamiento |
$('.linked').scrollLeft(y); | Desplácese a ambos a esa posición. |
}); | Cierra el bloque |
Cuando se desplaza el superior, sucede esto:
·
Juan Pablo Isaza
Denunciar
Responde la pregunta