Изменение полосы прокрутки страницы

147
16

Скажем, у меня есть статическая веб-страница, и вся страница обернута, допустим, внутри ширины 700 пикселей, теперь, если содержимое страницы слишком длинное, тогда (очевидно) появится полоса прокрутки. НО внешний вид полосы прокрутки перемещает все слева влево, как несколько пикселей (те, которые должны соответствовать полосе прокрутки в правой части страницы). То, что я хотел бы сделать, - удалить этот "движущийся" эффект, чтобы, если необходима полоса прокрутки, это никак не влияет на содержимое страницы.


Я не знаю, ясно ли я.


скажем, что это веб-страница:


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


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


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


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


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


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


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


и так выглядит с полосой прокрутки:


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

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

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

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

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

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

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


но я хотел бы иметь что-то вроде этого:


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

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

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

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

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

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

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


точки представляют пробелы, содержимое представляет содержимое веб-страницы, а столбец справа представляет полосу прокрутки.

спросил(а) 2012-05-12T13:33:00+04:00 8 лет, 9 месяцев назад
1
Решение
119

Вы можете установить overflow-y: scroll как правило для своего тела. Это всегда будет отображать вертикальную полосу прокрутки, которая отключена, если контент не будет достаточно длинным для прокрутки. Таким образом, контент не будет перемещаться влево, если он достаточно длинный, чтобы вы могли прокручивать, а для выполнения этой работы не требуется никаких сценариев.

ответил(а) 2012-05-12T13:40:00+04:00 8 лет, 9 месяцев назад
95

если вы не нуждаетесь в полосе прокрутки вообще, вы можете использовать это:


body {
overflow-y: hidden;
}

UPD., поэтому, если вам нужна полоса прокрутки для прокрутки содержимого, но вы хотите скрыть его, вы можете использовать следующий метод (демонстрация на 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>

ответил(а) 2012-05-12T14:04:00+04:00 8 лет, 9 месяцев назад
73

У меня была такая же проблема, и только решение с использованием JS/jQuery было достаточно хорошим для меня.


Я использовал ссылку на Обнаружение, если страница имеет вертикальную полосу прокрутки?, предоставленную ранее, и эти ссылки: http://davidwalsh.name/detect-scrollbar-width, http://api.jquery.com/css/#css2, Центрировать позицию: фиксированный элемент для создания следующего кода.


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);
}
});


В случае гибкой ширины корпуса необходимо добавить еще один код.

ответил(а) 2012-11-30T16:30:00+04:00 8 лет, 2 месяца назад
43

В браузерах не поддерживается следующее:
MDN docs, однако, я думаю, вам может показаться интересным.


overflow-y: overlay;

В браузерах, которые поддерживают это свойство, например Google Chrome, это приведет к тому, что полоса прокрутки будет поверх вашего контента вместо того, чтобы переносить содержимое, когда требуется полоса прокрутки. Затем вы можете добавить достаточное количество дополнений, чтобы ваш контент никогда не был закрыт им.


Похоже, это свойство не пользуется популярностью, и даже браузеры, которые его поддерживают, планируют отказаться от поддержки. Я не понимаю, почему, потому что он, безусловно, имеет свои преимущества.

ответил(а) 2017-08-03T23:18:00+03:00 3 года, 6 месяцев назад
43

вы можете проверить, имеет ли экран полосу прокрутки. если это правда, чем вы могли бы поместить контент вправо, возможно, эта ссылка поможет вам: Обнаружить, если страница имеет вертикальную полосу прокрутки?

ответил(а) 2012-05-12T13:38:00+04:00 8 лет, 9 месяцев назад
-4

overflow-x: hidden;

в теле CSS-код, ПОМОГИТЕ ВСЕ! Черт, взял меня на 45 минут, чтобы побродить по упрощенному ответу.


что пошло не так?... У меня был объект hover = show image. Я правильно изменил все изображения; когда я обновил страницу, полоса прокрутки имела способ много играть в комнату!..... Итак, я поместил переполнение-x в каждый тег div (каждый тег div, назначенный отдельному элементу списка), и ничего не произошло!
Решение: код был верным, но место размещения должно было находиться в теге body. а не отдельные теги div. Блин..... thankz

ответил(а) 2012-12-03T05:17:00+04:00 8 лет, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема