javascript - Overflow-x 滚动属性在桌面上有效，但在手机上无效

Question

Froala编辑器工具栏图标在桌面上可以水平滚动，但在手机上则不能。

我做了一项研究，发现通过添加 -webkit-overflow-scrolling: touch 属性，div 标签可以在移动设备中滚动，但这似乎不起作用。

   .fr-toolbar {
        position: fixed;
        display: flex;
        overflow: scroll;
        width: 100%;
        -webkit-overflow-scrolling: touch;
 }

这里是jsfiddle链接，以便更好地理解和引用:http://jsfiddle.net/wc5c3jhk/381/

这是 Codepen 链接:https://codepen.io/Dinesh_Madhanlal/pen/Gdvxqw

有人可以解释一下发生了什么吗？

Answer 1

请检查此处提供的 JSFiddle - http://jsfiddle.net/m2f8pygq/

.fr-toolbar {
  min-width: 300PX;
    max-width: 100%;
    /* overflow-y: hidden; */
    /* overflow-x: scroll; */
    OVERFLOW: VISIBLE;
    display: flex;
    border: 1px solid black;
    FLEX-WRAP: wrap;
 }

这将帮助您了解 Froala 的实现方式以及在桌面或移动设备中打开时工具栏按钮如何包装在 DIV 中。

简而言之，这不是一个好的选择。