问使用flex布局时Chrome滚动条损坏
EN

Stack Overflow用户

提问于 2020-01-07 18:41:10

回答 1查看 487关注 0票数 2

我正试着在一个设置为display: flex的div上定制chrome滚动条，滚动条坏了(见截图:屏幕截图显示上下箭头，水平滚动条缺少拖动部分)。

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

问题：

预期结果：

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

html

css

google-chrome

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-01-07 19:06:16

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

注意:页面不能向左或向右滚动，因为它没有内容可以左右滚动。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>