Tengo un sitio web con DIV alineado al centro. Ahora, algunas páginas necesitan desplazarse, otras no. Cuando me muevo de un tipo a otro, la apariencia de una barra de desplazamiento mueve la página unos pocos píxeles hacia un lado. ¿Hay alguna forma de evitar esto sin mostrar explícitamente las barras de desplazamiento en cada página?
Respuestas:
overflow-y: scroll es correcto, pero debe usarlo con la etiqueta html, no body o de lo contrario obtendrá una barra de desplazamiento doble en IE 7
Entonces el CSS correcto sería:
html {
overflow-y: scroll;
}Envuelva el contenido de su elemento desplazable en un div y aplique padding-left: calc(100vw - 100%);.
<body>
<div style="padding-left: calc(100vw - 100%);">
Some Content that is higher than the user's screen
</div>
</body>El truco es que 100vwrepresenta el 100% de la ventana gráfica, incluida la barra de desplazamiento. Si resta 100%, que es el espacio disponible sin la barra de desplazamiento, terminará con el ancho de la barra de desplazamiento o 0si no está presente. Crear un relleno de ese ancho a la izquierda simulará una segunda barra de desplazamiento, desplazando el contenido centrado de nuevo a la derecha.
Tenga en cuenta que esto solo funcionará si el elemento desplazable usa todo el ancho de la página, pero esto no debería ser un problema la mayor parte del tiempo porque solo hay algunos otros casos en los que ha centrado el contenido desplazable.
100vwy 100%medí cosas diferentes, ¡así que aprendí algo útil de esto!
@media screen and (min-width: 800px) {...} . En los casos en que el contenido se ajuste al ancho de la página. Por ejemplo, en resoluciones pequeñas, habrá una brecha innecesaria, desplazando el contenido a la derecha
Yo creo que no. Pero el estilo bodycon overflow: scrolldebería hacerlo. Aunque pareces saber eso.
overflow-y: scroll:)
Con el desplazamiento siempre mostrado, quizás no sea bueno para el diseño.
Intenta limitar el ancho del cuerpo con css3
body {
width: calc(100vw - 34px);
}vwes el ancho de la ventana gráfica (vea este enlace para obtener una explicación)
calccalcular en css3
34pxsignifica ancho de barra de desplazamiento doble (vea esto para fijo o esto para calcular si no confía en tamaños fijos)
padding-left: 34px;para centrar uniformemente mi página.
html {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
}Ejemplo . Haga clic en el botón "Cambiar altura mínima".
Con calc(100vw - 100%)podemos calcular el ancho de la barra de desplazamiento (y si no se muestra, será 0). Idea: usando el margen negativo a la derecha, podemos aumentar el ancho de <html>este ancho. Verá una barra de desplazamiento horizontal; debe ocultarse usando overflow-x: hidden.
calc(100% - 100vw)lugar de multiplicar por -1?
No sé si esta es una publicación anterior, pero tuve el mismo problema y si quieres desplazarte verticalmente solo debes intentarlo overflow-y:scroll
Si cambia el tamaño o después de cargar algunos datos, está agregando la barra de desplazamiento, puede intentar lo siguiente, crear una clase y aplicar esta clase.
.auto-scroll {
overflow-y: overlay;
overflow-x: overlay;
}He resuelto el problema en uno de mis sitios web estableciendo explícitamente el ancho del cuerpo en javascript por el tamaño de la vista menos el ancho de la barra de desplazamiento. Utilizo una función basada en jQuery documentada aquí para determinar el ancho de la barra de desplazamiento.
<body id="bodyid>
var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";Ampliando la respuesta usando esto:
body {
width: calc(100vw - 17px);
}Un comentarista sugirió agregar también el relleno izquierdo para mantener el centrado:
body {
padding-left: 17px;
width: calc(100vw - 17px);
}Pero las cosas no parecen correctas si su contenido es más ancho que la ventana gráfica. Para solucionarlo, puede usar consultas de medios, como esta:
@media screen and (min-width: 1058px) {
body {
padding-left: 17px;
width: calc(100vw - 17px);
}
}Donde el 1058px = ancho de contenido + 17 * 2
Esto permite que una barra de desplazamiento horizontal maneje el desbordamiento xy mantenga centrado el contenido centrado cuando la ventana gráfica es lo suficientemente amplia como para contener su contenido de ancho fijo
Extendiéndose a partir de la respuesta de Rapti , esto debería funcionar igual de bien, pero agrega más margen al lado derecho del bodyy lo oculta con htmlmargen negativo , en lugar de agregar relleno adicional que podría afectar el diseño de la página. De esta manera, no se cambia nada en la página real (en la mayoría de los casos) y el código sigue siendo funcional.
html {
margin-right: calc(100% - 100vw);
}
body {
margin-right: calc(100vw - 100%);
}overflow-x: hiddeny eso lo arregló.
La solución de @ kashesandr funcionó para mí, pero para ocultar la barra de desplazamiento horizontal agregué un estilo más para el cuerpo. Aquí está la solución completa:
CSS
<style>
/* prevent layout shifting and hide horizontal scroll */
html {
width: 100vw;
}
body {
overflow-x: hidden;
}
</style>JS
$(function(){
/**
* For multiple modals.
* Enables scrolling of 1st modal when 2nd modal is closed.
*/
$('.modal').on('hidden.bs.modal', function (event) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});
});Solución JS Only (cuando el segundo modal se abrió desde el primer modal):
/**
* For multiple modals.
* Enables scrolling of 1st modal when 2nd modal is closed.
*/
$('.modal').on('hidden.bs.modal', function (event) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
$('body').css('padding-right', 17);
}
});Traté de solucionar el probable problema al que se .modal-openaplicaba la clase bootstrap de Twitter body. La solución html {overflow-y: scroll}no ayuda. Una posible solución que encontré es agregar {width: 100%; width: 100vw}al htmlelemento.
html { width: 100vw; }trabajado para mí
Solía tener ese problema, pero la forma más simple de solucionarlo es esto (esto funciona para mí):
en el tipo de archivo CSS:
body{overflow-y:scroll;}así de simple! :)
Las soluciones publicadas usando calc (100vw - 100%) están en el camino correcto, pero hay un problema con esto: siempre tendrá un margen a la izquierda del tamaño de la barra de desplazamiento, incluso si cambia el tamaño de la ventana para que el el contenido llena toda la ventana gráfica.
Si intenta evitar esto con una consulta de medios, tendrá un momento de ajuste incómodo porque el margen no se reducirá progresivamente a medida que cambie el tamaño de la ventana.
Aquí hay una solución que evita eso y AFAIK no tiene inconvenientes:
En lugar de usar margin: auto para centrar su contenido, use esto:
body {
margin-left: calc(50vw - 500px);
}Reemplace 500 px con la mitad del ancho máximo de su contenido (en este ejemplo, el ancho máximo del contenido es 1000 px). El contenido ahora permanecerá centrado y el margen disminuirá progresivamente hasta que el contenido llene la ventana gráfica.
Para evitar que el margen se vuelva negativo cuando la ventana gráfica es más pequeña que el ancho máximo, simplemente agregue una consulta de medios como esta:
@media screen and (max-width:1000px) {
body {
margin-left: 0;
}
}Et voilà!
Si el ancho de la tabla no cambia, puede establecer el ancho del elemento (como tbody) que contiene la barra de desplazamiento> 100% (permitiendo espacio adicional para la barra de desplazamiento) y establecer overflow-y en "overlay" (por lo tanto que la barra de desplazamiento permanece fija y no desplazará la tabla hacia la izquierda cuando aparezca). Establezca también una altura fija para el elemento con la barra de desplazamiento, de modo que la barra de desplazamiento aparecerá una vez que se exceda la altura. Al igual que:
tbody {
height: 100px;
overflow-y: overlay;
width: 105%
}Nota: tendrá que ajustar manualmente el% de ancho ya que el% de espacio que ocupa la barra de desplazamiento será relativo al ancho de su tabla (es decir: ancho de tabla más pequeño, se requiere más% para ajustarse a la barra de desplazamiento, ya que su tamaño en píxeles es constante )
Un ejemplo de tabla dinámica:
function addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++)
{
var newRow = row.insertCell(i);
newRow.innerHTML = table.rows[0].cells[i].innerHTML;
newRow.childNodes[0].value = "";
}
}
function deleteRow(row)
{
var table = document.getElementById("data");
var rowCount = table.rows.length;
var rowIndex = row.parentNode.parentNode.rowIndex;
document.getElementById("data").deleteRow(rowIndex);
}.scroll-table {
border-collapse: collapse;
}
.scroll-table tbody {
display:block;
overflow-y:overlay;
height:60px;
width: 105%
}
.scroll-table tbody td {
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
.scroll-table thead tr {
display:block;
}
.scroll-table td {
border-top: thin solid;
border-bottom: thin solid;
}
.scroll-table td:first-child {
border-left: thin solid;
}
.scroll-table td:last-child {
border-right: thin solid;
}
.scroll-table tr:first-child {
display: none;
}
.delete_button {
background-color: red;
color: white;
}
.container {
display: inline-block;
}
body {
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="test_table.css">
</head>
<body>
<h1>Dynamic Table</h1>
<div class="container">
<table id="data" class="scroll-table">
<tbody>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="button" class="delete_button" value="X" onclick="deleteRow(this)"></td>
</tr>
</tbody>
</table>
<input type="button" value="Add" onclick="addRow('data')" />
</div>
<script src="test_table.js"></script>
</body>
</html>Utilicé un poco de jquery para resolver esto
$('html').css({
'overflow-y': 'hidden'
});
$(document).ready(function(){
$(window).load(function() {
$('html').css({
'overflow-y': ''
});
});
});@media screen and (min-width: 1024px){
body {
min-height: 700px
}
}Contrariamente a la respuesta aceptada que sugiere una barra de desplazamiento permanente en la ventana del navegador, incluso si el contenido no desborda la pantalla , preferiría usar:
html{
height:101%;
}Esto se debe a que la apariencia de la barra de desplazamiento tiene más sentido si el contenido se desborda .
overflow-y: overlayen este hilo?