使用 Flex 布局时 Chrome 滚动条损坏

Question

使用 Flex 布局时 Chrome 滚动条损坏

我正在尝试在设置为显示的div上自定义chrome滚动条：flex，滚动条已损坏（参见屏幕截图：屏幕截图显示双向上和向下箭头，并且水平滚动条缺少拖动部分）。

没有将div（.container）设置为display：flex看起来很好，但是我的系统充满了flex布局。

任何人都可以帮助解决这个问题吗？谢谢

<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>

Run Code Online (Sandbox Code Playgroud)

问题：

预期结果：

jsfiddle 上的相同代码https://jsfiddle.net/Mingzilla/0asgu6j1/

Answer 1

Lai*_*aif 2

要修复双箭头，请包含:single-button:在 CSS 目标中。

注意：页面不会向左或向右滚动，因为没有内容可供左右滚动。Flexbox 将通过弯曲窗口来容纳窗口中的所有内容，因此没有理由有滚动条手柄。（将内部div更改为最小宽度也可以强制水平滚动条出现）

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，8 月前
查看次数：	783 次
最近记录：	1 年，7 月前