1

Такой ситуация есть такой код overflow:hidden; который скрывает скролл.

черный: скролл, синий: содержание, красный: положение

И когда я скрываю скролл бывает так

введите сюда описание изображения

Как сделать чтобы был так

введите сюда описание изображения

При overflow:hidden; контент двигается left примерно 17~20px; и как решить эту проблему чтобы не двигать. Заранее спасибо!

3
  • А можно где то живой пример посмотреть? Такой ситуации не должно быть, скорее всего у вас где то задан неверный стиль.
    – zig1375
    Commented 23 июл. 2015 в 21:21
  • воспроизведите кусок кода и стиль. первая мысль - поиграться с padding, но кто знает что имелось ввиду.
    – toxxxa
    Commented 23 июл. 2015 в 22:08
  • 1
    @zig1375, именно такая и должна быть.
    – Qwertiy
    Commented 24 июл. 2015 в 0:23

2 ответа 2

2

Для браузеров на основе хромиума можно использовать

overflow-y: overlay;

К сожалению, для остальных браузеров ничего подобного мне неизвестно.

p {
  display: inline-block;
  width: 25%;
  padding: 0;
  margin: 0;
  line-height: 1.3em;
  height: 9.5em;
  outline: 1px solid;
  box-sizing: border-box;
  vertical-align: top;
}

p:before {
  content: "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
}

#more:checked ~ p:after {
  content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
<input type=checkbox id=more><label for=more>More content</label><br>
<p style="overflow:auto">
<p style="overflow:auto;padding-right:32px;">
<p style="overflow:overlay">
<p style="overflow:overlay;padding-right:32px;">

2
  • Спасибо но overflow:overlay; не работает на Mozilla Firefox. Нет такой функция в Mozilla Firefox. Commented 24 июл. 2015 в 3:19
  • А можно через JavaScript? Commented 24 июл. 2015 в 3:22
1

Как вариант - overflow-y: scroll. Полоса прокрутки будет отображаться всегда. Даже когда прокрутка не нужна. Но проблему со смещением контента это решит

1
  • Ты правильно сказал. Ну это не приятно да... Commented 24 июл. 2015 в 3:26

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.