Блог

Главная - Вопросы по программированию - переполнение y прокрутки в позиции фиксированного div показывает двойные полосы прокрутки

переполнение y прокрутки в позиции фиксированного div показывает двойные полосы прокрутки

#html #css

#HTML #css

Вопрос:

Когда у меня есть «накладная боковая панель», введите div с position: fixed правой стороны тела (где также есть содержимое переполнения) Я получаю двойные полосы прокрутки.

Я думаю, что я бы хотел, чтобы наложенный div «закрывал» полосу прокрутки тела, если это возможно. пример в Chrome и Linux здесь, пример в Chrome и Linux здесь и пример js fiddle здесь

Спасибо!

Ответ №1:

Если вы просто хотите скрыть полосу прокрутки тела, сохраняя при этом его функциональность, вы добавляете это в свой CSS

 body::-webkit-scrollbar {
  display: none;
}

Примечание: скрытие полосы прокрутки не является хорошей практикой.

Ответ №2:

Элемент таблицы достигнет желаемого результата компоновки, который вы ищете. Браузер Chrome не сразу вызывает полосы прокрутки при отображении таблицы (я не уверен, почему), но это работает. Добавить display: table; в #sidebar CSS.

 body,
#sidebar {
  padding: 2rem;

}

body {
  background-color: #eee;
}

#sidebar {
  background-color: lightblue;
  border-left: 2px solid blue;
  display: table;
  position: fixed;
  width: 30vw;
  height: 100%;
  right: 0;
  top: 0;
  overflow-y: auto;
}

Ответ №3:

 body,
#sidebar {
  padding: 2rem;

}

body {
  background-color: #eee;
}

#sidebar {
  background-color: lightblue;
  border-left: 2px solid blue;
  position: fixed;
  width: 30vw;
  height: 100vh;
  right: 0;
  top: 0;
  overflow-y: auto;
}  
 <body>
  <div id="content">
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
    <p>hello it's content content content</p>
  </div>
  <div id="sidebar">
    <p>hello it's sidebar content</p>
    <p>hello it's sidebar content</p>
    <p>hello it's sidebar content</p>
    <p>hello it's sidebar content</p>
  </div>
</body>

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