Chrome оставляет пространство для полосы прокрутки, даже если она скрыта

Я столкнулся с проблемой в браузерах webkit (IE и FF в порядке), где пространство прокрутки зарезервировано для элемента, даже если полоса прокрутки не отображается. Вы можете увидеть в примере, что после того, как средняя зависает, пространство полосы прокрутки по-прежнему сохраняется. Мне просто интересно, если это проблема с Chrome или только часть спецификации HTML/CSS. Этот аналогичный question содержит исправление, но он не объясняет, является ли это ошибкой или нет, и необходимость устанавливать явную ширину для детей не то, что я хочу сделать.

        .hidden-scroll {
            background: black;
            overflow-y: hidden;
            height: 400px;
            width: 300px;
        }

        .hidden-scroll:hover {
            overflow-y: auto;
        }

        .no-hover.hidden-scroll:hover {
            overflow-y: hidden;
        }

        .hidden-scroll-content {
            background: red;
            height: 50px;
        }

<body>
<div>No scroll needed</div>


<div class="hidden-scroll">
    <div class="hidden-scroll-content">1</div>
    <div class="hidden-scroll-content">2</div>
    <div class="hidden-scroll-content">3</div>
    <div class="hidden-scroll-content">4</div>
</div>

<div>Scroll on hover</div>

<div class="hidden-scroll">
    <div class="hidden-scroll-content">1</div>
    <div class="hidden-scroll-content">2</div>
    <div class="hidden-scroll-content">3</div>
    <div class="hidden-scroll-content">4</div>
    <div class="hidden-scroll-content">5</div>
    <div class="hidden-scroll-content">6</div>
    <div class="hidden-scroll-content">7</div>
    <div class="hidden-scroll-content">8</div>
    <div class="hidden-scroll-content">9</div>
    <div class="hidden-scroll-content">10</div>
    <div class="hidden-scroll-content">11</div>
    <div class="hidden-scroll-content">12</div>
</div>

<div>No scroll on hover</div>

<div class="no-hover hidden-scroll">
    <div class="hidden-scroll-content">1</div>
    <div class="hidden-scroll-content">2</div>
    <div class="hidden-scroll-content">3</div>
    <div class="hidden-scroll-content">4</div>
    <div class="hidden-scroll-content">5</div>
    <div class="hidden-scroll-content">6</div>
    <div class="hidden-scroll-content">7</div>
    <div class="hidden-scroll-content">8</div>
    <div class="hidden-scroll-content">9</div>
    <div class="hidden-scroll-content">10</div>
    <div class="hidden-scroll-content">11</div>
    <div class="hidden-scroll-content">12</div>
</div>


</body>

Ответы

Ответ 1

Кажется, что ошибка, я заметил, что после сброса ширины позиции (для любого значения auto/100%) поле перерисовывается и правильно раскладывается до другого наведения, ну, на мгновение, как насчет хакерского взлома? Hacky demo

.wrapper {
    height:400px;
    width:300px;
    overflow:hidden;
}

.wrapper:hover .hidden-scroll {
    width:300px;
}

.wrapper:hover .hidden-scroll div {
    padding-right:0;
}

.hidden-scroll {
  background: black;
  overflow-y: auto;
  overflow-x: hidden;
  height: 400px;
  width: 330px;
}

.hidden-scroll div {
  background: red;
  height: 50px;
  width: auto;
  padding-right:30px;
}

Ответ 2

Я столкнулся с ситуацией, подобной твоей (я думаю), где мне нужны прокрутки, но мне не нужны полосы прокрутки. Я также поставил пользовательский < и > пейджинговые элементы управления на концах видимых областей на страницу через прокручиваемую область. Таким образом, полосы прокрутки меня просто раздражали.

Вы можете отключить полосы прокрутки для заданного класса с помощью:

.class::-webkit-scrollbar {
   width: 0 !important;
   height: 0 !important;
}

без высоты: 0, я видел пустую область с высотой полосы прокрутки, и она ела содержимое. Как только я добавил высоту: 0 в этот CSS, он ушел, и все хорошо.

Надеюсь, это поможет.

Теперь я ухожу, чтобы узнать, могу ли я найти то же самое для Edge, IE и Firefox. Это работает в Chrome и Safari.

Ответ 3

Если вы не хотите видеть полосу прокрутки, попробуйте (сработали для меня)

.class::-webkit-scrollbar {
 display : none;
}

Ответ 4

его необходимо заменить на:

overflow: hidden;

вместо. потому что, он говорит, что его переполнение скрыто, но все еще в состоянии прокрутить поле вниз, и то, что сказал Вишну, вам нужно сделать display: none; То есть ничего не отображать.

Надеюсь, это поможет! 👻💕👌

Ответ 5

Использование overflow: hidden; внутри ::-webkit-scrollbar работал для меня.

[className]::-webkit-scrollbar {
  overflow: hidden;
}

Вы можете прочитать больше об этом здесь: :: - webkit-scrollbar.