Chrome полоса прокрутки не работает при использовании гибкого макета - PullRequest
Новая
       0

Chrome полоса прокрутки не работает при использовании гибкого макета

2 голосов
/ 07 января 2020

Я пытаюсь настроить полосу прокрутки chrome для элемента div, для которого установлено отображение: flex, полосы прокрутки не работают (см. Скриншот: на снимке экрана показаны двойные стрелки вверх и вниз, а на горизонтальной полосе прокрутки отсутствует перетаскивание часть).

Выглядит нормально, не устанавливая div (.container) для отображения: flex, но моя система полна flex layout.

Может кто-нибудь помочь решить проблему? Спасибо 

<html>
<head>
    <style>
        ::-webkit-scrollbar-button:horizontal:decrement {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEXM09b///8OmaLeAAAAAnRSTlP/AOW3MEoAAAAiSURBVHgBY2BEAxQJMKAJMKAJMKAJMOATgIkQMBTBooZfAH56AO2yINTrAAAAAElFTkSuQmCC);
        }

        ::-webkit-scrollbar-button:horizontal:increment {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEXM09b///8OmaLeAAAAAnRSTlP/AOW3MEoAAAAgSURBVHgBY2BEA+QLMGAIMGAIMGAIMBAUIGQoZU5HAwB+ZgDtGYq3fgAAAABJRU5ErkJggg==);
        }

        ::-webkit-scrollbar-button:vertical:increment {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEXM09b///8OmaLeAAAAAnRSTlP/AOW3MEoAAAAfSURBVHgBY2BEA7QTYIAChAoYH6EFxkeYwQBj0MelAH3GAO2C9+AaAAAAAElFTkSuQmCC)
        }

        ::-webkit-scrollbar-button:vertical:decrement {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEXM09b///8OmaLeAAAAAnRSTlP/AOW3MEoAAAAgSURBVHgBY2BEAzQVYIAzYHwGGAvOZ4AyIXyECH1cCgB/GgDtpWTgqAAAAABJRU5ErkJggg==)
        }

        ::-webkit-scrollbar {
            height: 12px;
            width: 12px
        }

        ::-webkit-scrollbar-track {
            background-color: rgba(222, 222, 222, 0.8);
        }

        ::-webkit-scrollbar-button {
            background-color: rgba(170, 170, 170, 0.8);
        }

        ::-webkit-scrollbar-button:hover,
        ::-webkit-scrollbar-thumb {
            background-color: rgba(138, 138, 138, 0.8);
        }

        ::-webkit-scrollbar-corner {
            background-color: rgba(222, 222, 222, 0.8);
        }

        ::-webkit-scrollbar-button:horizontal:decrement,
        ::-webkit-scrollbar-button:horizontal:increment,
        ::-webkit-scrollbar-button:vertical:decrement,
        ::-webkit-scrollbar-button:vertical:increment {
            height: 12px;
            width: 12px;
            background-position: 50%;
        }

        .container {
            background: orange;
            color: white;
            overflow-x: scroll;
            display: flex; /* this line breaks the scroll bars */
        }
    </style>
</head>
<body>
<div style="height:300px;width:300px;" class="container">
    <div style="width: 800px; height: 800px">Hello</div>
</div>
</body>
</html>

Задача:

problem

Ожидаемый результат:

expectation

Тот же код на jsfiddle https://jsfiddle.net/Mingzilla/0asgu6j1/

1 Ответ

1 голос
/ 07 января 2020

Чтобы исправить двойные стрелки, включите :single-button: в свои CSS цели.

Примечание. Страница не прокручивается ни влево, ни вправо, поскольку для нее нет содержимого, которое можно прокручивать влево и вправо. , Flexbox поместит весь контент в окне, согнув его, поэтому нет никакой причины для наличия ручки прокрутки. (Изменение внутреннего div на min-width также может привести к появлению горизонтальной полосы прокрутки) 

<html>
<head>
    <style>
        ::-webkit-scrollbar-button:single-button:horizontal:decrement {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEXM09b///8OmaLeAAAAAnRSTlP/AOW3MEoAAAAiSURBVHgBY2BEAxQJMKAJMKAJMKAJMOATgIkQMBTBooZfAH56AO2yINTrAAAAAElFTkSuQmCC);
        }

        ::-webkit-scrollbar-button:single-button:horizontal:increment {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEXM09b///8OmaLeAAAAAnRSTlP/AOW3MEoAAAAgSURBVHgBY2BEA+QLMGAIMGAIMGAIMBAUIGQoZU5HAwB+ZgDtGYq3fgAAAABJRU5ErkJggg==);
        }

        ::-webkit-scrollbar-button:single-button:vertical:increment {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEXM09b///8OmaLeAAAAAnRSTlP/AOW3MEoAAAAfSURBVHgBY2BEA7QTYIAChAoYH6EFxkeYwQBj0MelAH3GAO2C9+AaAAAAAElFTkSuQmCC)
        }

        ::-webkit-scrollbar-button:single-button:vertical:decrement {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEXM09b///8OmaLeAAAAAnRSTlP/AOW3MEoAAAAgSURBVHgBY2BEAzQVYIAzYHwGGAvOZ4AyIXyECH1cCgB/GgDtpWTgqAAAAABJRU5ErkJggg==)
        }

        ::-webkit-scrollbar {
            height: 12px;
            width: 12px
        }

        ::-webkit-scrollbar-track {
            background-color: rgba(222, 222, 222, 0.8);
        }

        ::-webkit-scrollbar-button:single-button {
            background-color: rgba(170, 170, 170, 0.8);
        }

        ::-webkit-scrollbar-button:single-button:hover,
        ::-webkit-scrollbar-thumb {
            background-color: rgba(138, 138, 138, 0.8);
        }

        ::-webkit-scrollbar-corner {
            background-color: rgba(222, 222, 222, 0.8);
        }

        ::-webkit-scrollbar-button:single-button:horizontal:decrement,
        ::-webkit-scrollbar-button:single-button:horizontal:increment,
        ::-webkit-scrollbar-button:single-button:vertical:decrement,
        ::-webkit-scrollbar-button:single-button:vertical:increment {
            height: 12px;
            width: 12px;
            background-position: 50%;
        }

        .container {
            background: orange;
            color: white;
            overflow-x: scroll;
            display: flex; /* this line turns .container into flex layout */
        }
    </style>
</head>
<body>
<div style="height:300px;width:300px;" class="container">
    <div style="min-width: 800px; height: 800px">Hello</div>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...