Я разрабатываю приложение с несколькими компонентами, которые можно прокручивать по горизонтали.Я столкнулся с некоторым нежелательным поведением, когда горизонтальная полоса прокрутки не исчезает, оставляя уродливую длинную белую полосу прокрутки.
Мой параметр «показывать полосы прокрутки» в MacOS установлен на «Автоматически на основе мыши или трекпада».Мой хром - Версия 72.0.3626.121 (Официальная сборка) (64-разрядная версия).
Проблема может быть воспроизведена в следующем фрагменте кода.
#horizontal {
width: 100%;
height: 150px;
overflow-x: scroll;
overflow-y: hidden;
flex-direction: row;
border: 2px solid purple;
display: flex;
}
#vertical {
width: 300px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
flex-direction: column;
border: 2px solid purple;
display: flex;
}
.horizontal-item {
min-width: 100px;
width: 100px;
min-height: 100px;
height: 100px;
margin-right: 24px;
margin-bottom: 24px;
background-color: pink;
display: flex;
}
.vertical-item {
min-width: 100px;
width: 100px;
min-height: 100px;
height: 100px;
margin-right: 24px;
margin-bottom: 24px;
background-color: red;
display: flex;
}
<div id="horizontal">
<div class="horizontal-item">1</div>
<div class="horizontal-item">2</div>
<div class="horizontal-item">3</div>
<div class="horizontal-item">4</div>
<div class="horizontal-item">5</div>
<div class="horizontal-item">6</div>
<div class="horizontal-item">7</div>
<div class="horizontal-item">8</div>
<div class="horizontal-item">9</div>
<div class="horizontal-item">10</div>
<div class="horizontal-item">11</div>
<div class="horizontal-item">12</div>
<div class="horizontal-item">13</div>
<div class="horizontal-item">14</div>
<div class="horizontal-item">15</div>
<div class="horizontal-item">16</div>
<div class="horizontal-item">17</div>
<div class="horizontal-item">18</div>
<div class="horizontal-item">19</div>
<div class="horizontal-item">20</div>
</div>
<div id="vertical">
<div class="vertical-item">1</div>
<div class="vertical-item">2</div>
<div class="vertical-item">3</div>
<div class="vertical-item">4</div>
<div class="vertical-item">5</div>
<div class="vertical-item">6</div>
<div class="vertical-item">7</div>
<div class="vertical-item">8</div>
<div class="vertical-item">9</div>
<div class="vertical-item">10</div>
<div class="vertical-item">11</div>
<div class="vertical-item">12</div>
<div class="vertical-item">13</div>
<div class="vertical-item">14</div>
<div class="vertical-item">15</div>
<div class="vertical-item">16</div>
<div class="vertical-item">17</div>
<div class="vertical-item">18</div>
<div class="vertical-item">19</div>
<div class="vertical-item">20</div>
</div>
Проблема возникает при наведении курсора на нижнюю часть горизонтальной прокручиваемой области (поэтому там, где появится полоса прокрутки, фиолетовое дно контейнера с розовыми квадратами),Полоса прокрутки появится и больше никогда не выйдет.То же самое не происходит с областью вертикальной прокрутки, где полоса прокрутки также появляется, но исчезает.Если вы прокрутите полосу прокрутки до того, как наведите курсор на нижнюю часть, то впоследствии эта проблема не возникнет, если вы наведите указатель мыши на то место, где должна появиться полоса прокрутки.
На изображении ниже я завис над нижней частью горизонтальной прокручиваемой области ипоказывает, что полоса прокрутки есть (и она не уходит потом!).
Эта проблема также возникает, когда я наводю курсор мыши на горизонтальную полосу прокрутки из блока кода stackoverflow, делая текстедва читаемый.
Long line of text Long line of text Long line of text Long line of text Long line of text Long line of text Long line of text Long line of text
Это будет выглядеть так, и полоса прокрутки больше не исчезнет, как в моем случае: 
Я предполагаю, что этоэто ошибка в Chrome с MacOS, но я надеялся, что могут быть некоторые хитрости CSS, которые я могу сделать, чтобы решить эту проблему.