cambiar el tamaño de la página

Question

Digamos que tengo una página web estática y la página entera se envuelve, digamos dentro de un ancho de 700 px, ahora si el contenido de la página es demasiado largo, (obviamente) aparece una barra de desplazamiento. PERO la apariencia de la barra de desplazamiento mueve todo a la izquierda como unos pocos píxeles (los necesarios para caber en la barra de desplazamiento en el lado derecho de la página). Lo que me gustaría hacer es eliminar este efecto de "movimiento", de modo que si se necesita una barra de desplazamiento, esto no afecta el contenido de la página de ninguna manera.

No sé si he hecho yo claro.

digamos que se trata de una página web:

| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |

y así es como se ve con la barra de desplazamiento:

| ..... contentcontent .......... | |
| ..... contentcontent .......... | |
| ..... contentcontent .......... | |
| ..... contentcontent .......... | |
| ...... contentcontent .......... | |
| ..... contentcontent .......... | |
| ..... contentcontent .......... | |

pero me gustaría tener algo como esto:

| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |

puntos representan espacios en blanco, el contenido de representar el contenido de páginas web y la columna de la derecha representa la barra de desplazamiento.

Answer 1

Puede establecer overflow-y: scroll como regla para su cuerpo. Esto siempre mostrará una barra de desplazamiento vertical que está deshabilitada a menos que el contenido sea lo suficientemente largo como para desplazarse. De esta forma, el contenido no se desplazará hacia la izquierda cuando sea lo suficientemente largo para que puedas desplazarte y no se necesiten secuencias de comandos para que esto funcione.

Answer 2

se puede comprobar si la pantalla tiene una barra de desplazamiento. si es cierto, puede margen el contenido a la derecha, tal vez este enlace le ayudará: Detect if a page has a vertical scrollbar?

Answer 3

si está barra de desplazamiento no necesita en absoluto, puede utilizar esto:

body { 
    overflow-y: hidden; 
} 

UPD. así que si necesitas barra de desplazamiento para desplazarse por el contenido, pero quieren ocultarlo, se puede utilizar el following method (demo on dabblet.com):

css:

body { 
    overflow: hidden; 
} 

#fake_body { 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: -32px; 
    bottom: 0; 
    overflow-y: scroll; 
} 

html:

<div id="fake_body"> 
    <ul> 
     <li>content content content #01</li> 
     <li>content content content #02</li> 
     <li>content content content #03</li> 
     … 
     <li>content content content #55</li> 
    </ul> 
</div> 

Answer 4

que tenía el mismo problema y La única solución que usó JS/jQuery fue suficiente para mí.

que utilizan enlace a Detect if a page has a vertical scrollbar? proporcionado antes y los enlaces: http://davidwalsh.name/detect-scrollbar-width, http://api.jquery.com/css/#css2, Center a position:fixed element para generar el siguiente código.

css:

body { 
    position: absolute; 
    left: 50%; 
    margin-left: -400px; 
    width: 800px; 
    height: 100%; 
} 

.scrollbar-measure { 
    width: 100px; 
    height: 100px; 
    overflow: scroll; 
    position: absolute; 
    top: -9999px; 
} 

JS:

$(document).ready(function() { 
    // Check if body height is higher than window height :) 
    if ($(document).height() > $(window).height()) { 

     // Create the measurement node 
     var scrollDiv = document.createElement("div"); 
     scrollDiv.className = "scrollbar-measure"; 
     document.body.appendChild(scrollDiv); 
     // Get the scroll bar width 
     var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; 
     // Delete the DIV 
     document.body.removeChild(scrollDiv); 

     // Change margin-left parameter for #container for preventing shift caused by scroll bar 
     var current_margin_left_px = $("#container").offset().left; 
     var current_margin_left = parseInt(current_margin_left_px, 10); 
     var changed_margin_left = current_margin_left + scrollbarWidth/2 + "px"; 
     $("#container").css("margin-left", changed_margin_left); 
    } 
}); 

En caso de cuerpo flexible Ancho de algo más de código tiene que ser añadido.

Answer 5

overflow-x: hidden; 

en el código CSS cuerpo, ayudó mucho!Maldición, me tomó 45 minutos para navegar por una respuesta simplista.

¿Qué salió mal? ... Tuve una imagen de hover = show image. Cambié el tamaño de todas las imágenes correctamente; cuando actualicé la página, ¡la barra de desplazamiento tenía mucho espacio para jugar! ... Así que coloqué un desbordamiento-x en todas y cada una de las etiquetas div (cada etiqueta div asignada a un elemento de la lista individual) y ¡no pasó nada! solución: el código era correcto, pero la ubicación debía estar en la etiqueta del cuerpo. no las etiquetas div individuales. Maldición ... gracias

Answer 6

Lo siguiente no es compatible en todos los navegadores, como por MDN docs, sin embargo, creo que puede resultarle interesante.

overflow-y: overlay; 

En los navegadores que soportan la propiedad, tales como Google Chrome, esto hará que la barra de desplazamiento en la parte superior de su contenido en lugar de cambiar su contenido a través de cuando se necesita una barra de desplazamiento. A continuación, puede agregar una cantidad suficiente de relleno para que su contenido nunca se cubra.

Parece que esta propiedad no es popular, e incluso los buscadores que la apoyan pretenden quitarle soporte técnico. No entiendo por qué, porque ciertamente tiene sus usos.