javascript - uso - barra de desplazamiento horizontal en la parte superior e inferior de la tabla
que son las barras de desplazamiento y para que sirve (11)
Tengo una table muy grande en mi página. Así que decidí poner una barra de desplazamiento horizontal que se coloca en la parte inferior de la tabla. Pero me gustaría que esta barra de desplazamiento también esté en la parte superior de la mesa.
Lo que tengo en la plantilla es esto:
<div style="overflow:auto; width:100%; height:130%">
<table id="data" style="width:100%">
¿Es esto posible hacerlo solo en HTML y CSS?
Sin JQuery (2017)
Debido a que es posible que no necesite JQuery, aquí hay una versión de Vanilla JS en funcionamiento basada en la respuesta @StanleyH:
var wrapper1 = document.getElementById(''wrapper1'');
var wrapper2 = document.getElementById(''wrapper2'');
wrapper1.onscroll = function() {
wrapper2.scrollLeft = wrapper1.scrollLeft;
};
wrapper2.onscroll = function() {
wrapper1.scrollLeft = wrapper2.scrollLeft;
};
#wrapper1, #wrapper2{width: 300px; border: none 0px RED;
overflow-x: scroll; overflow-y:hidden;}
#wrapper1{height: 20px; }
#wrapper2{height: 100px; }
#div1 {width:1000px; height: 20px; }
#div2 {width:1000px; height: 100px; background-color: #88FF88;
overflow: auto;}
<div id="wrapper1">
<div id="div1">
</div>
</div>
<div id="wrapper2">
<div id="div2">
aaaa bbbb cccc dddd aaaa bbbb cccc
dddd aaaa bbbb cccc dddd aaaa bbbb
cccc dddd aaaa bbbb cccc dddd aaaa
bbbb cccc dddd aaaa bbbb cccc dddd
</div>
</div>
Ampliando la respuesta de StanleyH, y tratando de encontrar el mínimo requerido, esto es lo que implementé:
JavaScript (llamado una vez desde algún lugar como $ (document) .ready ()):
function doubleScroll(){
$(".topScrollVisible").scroll(function(){
$(".tableWrapper")
.scrollLeft($(".topScrollVisible").scrollLeft());
});
$(".tableWrapper").scroll(function(){
$(".topScrollVisible")
.scrollLeft($(".tableWrapper").scrollLeft());
});
}
HTML (tenga en cuenta que los anchos cambiarán la longitud de la barra de desplazamiento):
<div class="topScrollVisible" style="overflow-x:scroll">
<div class="topScrollTableLength" style="width:1520px; height:20px">
</div>
</div>
<div class="tableWrapper" style="overflow:auto; height:100%;">
<table id="myTable" style="width:1470px" class="myTableClass">
...
</table>
Eso es.
Basado en la solución @StanleyH, creé una directiva AngularJS , demostración en jsFiddle .
Fácil de usar:
<div data-double-scroll-bar-horizontal> {{content}} or static content </div>
No se requiere jQuery.
En primer lugar, gran respuesta @StanleyH Si alguien se pregunta cómo hacer el contenedor de doble desplazamiento con ancho dinámico
css
.wrapper1, .wrapper2 { width: 100%; overflow-x: scroll; overflow-y: hidden; }
.wrapper1 { height: 20px; }
.div1 { height: 20px; }
.div2 { overflow: none; }
js
$(function () {
$(''.wrapper1'').on(''scroll'', function (e) {
$(''.wrapper2'').scrollLeft($(''.wrapper1'').scrollLeft());
});
$(''.wrapper2'').on(''scroll'', function (e) {
$(''.wrapper1'').scrollLeft($(''.wrapper2'').scrollLeft());
});
});
$(window).on(''load'', function (e) {
$(''.div1'').width($(''table'').width());
$(''.div2'').width($(''table'').width());
});
html
<div class="wrapper1">
<div class="div1"></div>
</div>
<div class="wrapper2">
<div class="div2">
<table>
<tbody>
<tr>
<td>table cell</td>
<td>table cell</td>
<!-- ... -->
<td>table cell</td>
<td>table cell</td>
</tr>
</tbody>
</table>
</div>
</div>
manifestación
Hasta donde yo sé, esto no es posible con HTML y CSS.
Hay un problema con la dirección de desplazamiento: rtl. Parece que el complemento no lo admite correctamente. Aquí está el violín: jsfiddle.net/qsn7tupc/3
Tenga en cuenta que funciona correctamente en Chrome, pero en todos los demás navegadores populares, la dirección de la barra de desplazamiento superior permanece a la izquierda.
Intenta usar el plugin jquery.doubleScroll
jQuery:
$(document).ready(function(){
$(''#double-scroll'').doubleScroll();
});
CSS
#double-scroll{
width: 400px;
}
HTML
<div id="double-scroll">
<table id="very-wide-element">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
Para simular una segunda barra de desplazamiento horizontal sobre un elemento, coloque un div "ficticio" sobre el elemento que tiene desplazamiento horizontal, lo suficientemente alto para una barra de desplazamiento. A continuación, adjunte los controladores del evento "scroll" para el elemento ficticio y el elemento real, para obtener el otro elemento en sincronización cuando se mueve cualquiera de las barras de desplazamiento. El elemento ficticio se verá como una segunda barra de desplazamiento horizontal sobre el elemento real.
Para un ejemplo en vivo , vea este violín
Aquí está el código :
HTML:
<div class="wrapper1">
<div class="div1"></div>
</div>
<div class="wrapper2">
<div class="div2">
<!-- Content Here -->
</div>
</div>
CSS:
.wrapper1, .wrapper2 {
width: 300px;
overflow-x: scroll;
overflow-y:hidden;
}
.wrapper1 {height: 20px; }
.wrapper2 {height: 200px; }
.div1 {
width:1000px;
height: 20px;
}
.div2 {
width:1000px;
height: 200px;
background-color: #88FF88;
overflow: auto;
}
JS:
$(function(){
$(".wrapper1").scroll(function(){
$(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function(){
$(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
});
});
Puede usar un complemento jquery que hará el trabajo por usted:
El complemento manejará toda la lógica para ti ...
Si está utilizando iscroll.js en el navegador webkit o en el navegador móvil, puede intentar:
$(''#pageWrapper>div:last-child'').css(''top'', "0px");
vincular los scrollers funcionó, pero en la forma en que está escrito crea un bucle que hace que el desplazamiento sea lento en la mayoría de los navegadores si haces clic en la parte de la barra de desplazamiento más liviana y lo mantienes (no al arrastrar la barra de desplazamiento).
Lo arreglé con una bandera:
$(function() {
x = 1;
$(".wrapper1").scroll(function() {
if (x == 1) {
x = 0;
$(".wrapper2")
.scrollLeft($(".wrapper1").scrollLeft());
} else {
x = 1;
}
});
$(".wrapper2").scroll(function() {
if (x == 1) {
x = 0;
$(".wrapper1")
.scrollLeft($(".wrapper2").scrollLeft());
} else {
x = 1;
}
});
});