Нежелательная вертикальная полоса прокрутки - PullRequest
Новая
       13

Нежелательная вертикальная полоса прокрутки

0 голосов
/ 26 февраля 2019

Вот простой пример HTML, где нижний контейнер имеет (возможно, неоправданную) вертикальную полосу прокрутки в Chrome, в отличие от Firefox. 

<div style="display: flex; flex-direction: column; height: 100px; width: 300px; border: 1px solid black">
  <div style="background-color: burlywood; overflow-y: auto">
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
  </div>
  <div style="background-color: cadetblue; overflow-y: auto;">
    <div>Test1</div>
  </div>
</div>

Rendering in Firefox Рендеринг в Firefox (65.0.1)

Rendering in Chrome Рендеринг в Chrome(72.0.3626.119)

Что такое правильный рендеринг и что может стать причиной путаницы при интерпретации между этими двумя браузерами?

Редактировать: Как следует избегать этой вертикальной прокрутки?Это главный вопрос здесь.

1 Ответ

0 голосов
/ 26 февраля 2019

Я не уверен, что это проблема соответствия стандартам.Это похоже на сбой в Firefox.

Вот три подтверждающих доказательства:

  1. Несмотря на то, что полоса прокрутки не отображается в нижней части окна в Firefox,функция прокрутки все еще работает.Просто наведите курсор мыши на поле и используйте прокручивающее устройство мыши для прокрутки вверх и вниз.Прокручивает нормально;Вы просто не видите полосу прокрутки.

  2. Переключение с overflow-y: auto на overflow-y: scroll.Это должно заставить полосу прокрутки появляться постоянно.В Firefox это не так.Но функция прокрутки по-прежнему работает с мышью.

  3. Иногда, по причинам, которые я пока не могу установить, полоса прокрутки действительно отображается в нижнем окне в Firefox. 

#container {
  display: flex;
  flex-direction: column;
  height: 100px;
  width: 300px;
  border: 1px solid black;
}

#container > div:first-child {
  overflow-y: auto;
  background-color: burlywood;
}

#container > div:last-child {
  overflow-y: auto; 
  /* test this:  overflow-y: scroll;  */
  background-color: cadetblue;
}
<div id="container">
  <div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
  </div>
  <div>
    <div>Test1<br>Test1<br>Test1<br>Test1</div>
  </div>
</div>
...