У меня есть веб-сайт с выравниванием по центру DIV. Теперь некоторые страницы нуждаются в прокрутке, некоторые нет. Когда я перемещаюсь от одного типа к другому, появление полосы прокрутки перемещает страницу на несколько пикселей в сторону. Есть ли способ избежать этого без явного отображения полос прокрутки на каждой странице?
Ответы:
overflow-y: scroll - это правильно, но вы должны использовать его с тегом html, а не с body, иначе вы получите двойную полосу прокрутки в IE 7.
Поэтому правильный css будет:
html {
overflow-y: scroll;
}
Оберните содержимое вашего прокручиваемого элемента в div и примените 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>
Хитрость в том, что 100vwпредставляет 100% области просмотра, включая полосу прокрутки. Если вы вычтите 100%, что является доступным пространством без полосы прокрутки, вы получите ширину полосы прокрутки или 0ее нет. Создание отступа такой ширины слева будет имитировать вторую полосу прокрутки, смещая центрированное содержимое назад вправо.
Обратите внимание, что это будет работать только в том случае, если прокручиваемый элемент использует всю ширину страницы, но в большинстве случаев это не должно быть проблемой, потому что есть только несколько других случаев, когда вы центрируете прокручиваемый контент.
100vwи 100%измерял разные вещи, поэтому я узнал кое-что полезное из этого!
@media screen and (min-width: 800px) {...} . В случаях, когда содержание будет соответствовать ширине страницы. Например, в небольших разрешениях будет ненужный пробел, сдвигая контент вправо
Думаю, нет. Но укладка bodyс overflow: scrollдолжны делать. Вы, кажется, знаете это, хотя.
overflow-y: scroll:)
С прокруткой всегда отображается, может быть, не очень хорошо для макета.
Попробуйте ограничить ширину тела с помощью css3
body {
width: calc(100vw - 34px);
}vwявляется шириной области просмотра (см. эту ссылку для некоторых объяснений),
calcрассчитанной в css3
34pxдля двойной ширины полосы прокрутки (см. это для фиксированных значений или для расчета, если вы не доверяете фиксированным размерам)
padding-left: 34px;чтобы равномерно центрировать мою страницу.
html {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
}Пример . Нажмите кнопку «Изменить минимальную высоту».
С помощью calc(100vw - 100%)мы можем вычислить ширину полосы прокрутки (и если она не отображается, она будет 0). Идея: используя отрицательное поле справа, мы можем увеличить ширину <html>до этой ширины. Вы увидите горизонтальную полосу прокрутки - ее следует скрыть, используя overflow-x: hidden.
calc(100% - 100vw)вместо умножения на -1?
Я не знаю, старый ли это пост, но у меня была та же проблема, и если вы хотите прокручивать только по вертикали, попробуйте overflow-y:scroll
Если при изменении размера или после загрузки некоторых данных добавляется полоса прокрутки, вы можете попробовать выполнить следующее, создать класс и применить этот класс.
.auto-scroll {
overflow-y: overlay;
overflow-x: overlay;
}Я решил проблему на одном из своих сайтов, явно установив ширину тела в javascript размером окна просмотра за вычетом ширины полосы прокрутки. Я использую описанную здесь функцию на основе jQuery для определения ширины полосы прокрутки.
<body id="bodyid>
var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";Расширяя ответ, используя это:
body {
width: calc(100vw - 17px);
}Один комментатор предложил также добавить левый отступ, чтобы сохранить центрирование:
body {
padding-left: 17px;
width: calc(100vw - 17px);
}Но тогда все выглядит не правильно, если ваш контент шире, чем область просмотра. Чтобы это исправить, вы можете использовать медиа-запросы, например:
@media screen and (min-width: 1058px) {
body {
padding-left: 17px;
width: calc(100vw - 17px);
}
}Где 1058px = ширина содержимого + 17 * 2
Это позволяет горизонтальной полосе прокрутки обрабатывать переполнение x и сохранять центрированное содержимое по центру, когда область просмотра достаточно широка, чтобы содержать содержимое с фиксированной шириной.
Расширение ответа Rapti , это должно работать точно так же, но оно добавляет больше поля к правой стороне bodyи скрывает его с отрицательным htmlполем вместо добавления дополнительного отступа, который потенциально может повлиять на макет страницы. Таким образом, на реальной странице ничего не меняется (в большинстве случаев), и код все еще функционирует.
html {
margin-right: calc(100% - 100vw);
}
body {
margin-right: calc(100vw - 100%);
}overflow-x: hiddenи это исправило.
Решение @ kashesandr помогло мне, но чтобы скрыть горизонтальную полосу прокрутки, я добавил еще один стиль для тела. вот полное решение:
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');
}
});
});Решение JS Only (когда 2-й модал открывается из 1-го модала):
/**
* 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);
}
});Я пытался исправить, вероятно, ту же проблему, которая была вызвана .modal-openклассом начальной загрузки Twitter body. Решение html {overflow-y: scroll}не помогает. Одно из возможных решений я нашел , чтобы добавить {width: 100%; width: 100vw}к htmlэлементу.
html { width: 100vw; }работал на меня
Я использую, чтобы иметь эту проблему, но самый простой способ исправить это (это работает для меня):
на тип файла CSS:
body{overflow-y:scroll;}как это просто! :)
Решения, опубликованные с использованием calc (100vw - 100%), находятся на правильном пути, но есть проблема с этим: у вас навсегда останется поле слева от размера полосы прокрутки, даже если вы измените размер окна так, чтобы содержимое заполняет весь видовой экран.
Если вы попытаетесь обойти это с помощью медиа-запроса, у вас будет неловкий момент щелчка, потому что поле не будет постепенно уменьшаться при изменении размера окна.
Вот решение, которое обходит это, и у AFAIK нет недостатков:
Вместо того чтобы использовать margin: auto для центрирования вашего контента, используйте это:
body {
margin-left: calc(50vw - 500px);
}Замените 500 пикселей на половину максимальной ширины вашего контента (поэтому в этом примере максимальная ширина контента составляет 1000 пикселей). Контент теперь будет оставаться в центре, а поле будет постепенно уменьшаться до тех пор, пока контент не заполнит область просмотра.
Чтобы препятствовать тому, чтобы отступ становился отрицательным, когда область просмотра меньше, чем max-width, просто добавьте медиа-запрос следующим образом:
@media screen and (max-width:1000px) {
body {
margin-left: 0;
}
}И вуаля!
Если ширина таблицы не изменится, вы можете установить ширину элемента (такого как tbody), который содержит полосу прокрутки> 100% (оставляя дополнительное пространство для полосы прокрутки), и установить для overflow-y значение «overlay» (так что полоса прокрутки остается фиксированной и не будет сдвигать таблицу влево, когда она появится). Также установите фиксированную высоту для элемента с полосой прокрутки, чтобы полоса прокрутки появлялась при превышении высоты. Вот так:
tbody {
height: 100px;
overflow-y: overlay;
width: 105%
}Примечание: вам придется вручную отрегулировать ширину%, так как% пространства, занимаемого полосой прокрутки, будет зависеть от ширины вашей таблицы (то есть: меньшая ширина таблицы, больше% требуется для размещения полосы прокрутки, так как ее размер в пикселях постоянен )
Пример динамической таблицы:
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>Я использовал JQuery, чтобы решить эту проблему
$('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
}
}Вопреки принятому ответу, который предлагает постоянную полосу прокрутки в окне браузера, даже если содержимое не выходит за пределы экрана , я бы предпочел использовать:
html{
height:101%;
}Это связано с тем, что появление полосы прокрутки имеет больше смысла, если содержимое фактически переполняется .
overflow-y: overlayв этой теме?