带有"webkit-overflow-scrolling: touch“的可见滚动条IOS

Question

我希望滚动条总是在IOS中可见。快速的解决方案是"::-webkit-scrollbar“修复。然而，当使用"webkit-overflow-scrolling: touch“来获得”幻灯片的感觉“时，滚动条就看不见了。

我怎么才能让它们都正常工作呢？

请参阅示例http://jsfiddle.net/gatb4ct6/5/

.frame {
    overflow-y: auto;
    border: 1px solid black;
    height: 13em;
    width: 10em;
    line-height: 1em;
    /*-webkit-overflow-scrolling: touch;*/
    /* uncomment above and scrollbars are not visible on IOS */
}

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 11px;
}

::-webkit-scrollbar:horizontal {
    height: 11px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

Answer 1

我也在寻找同样的问题。看起来您只能使用这两个选项中的一个。自动滚动，但带有样式滚动条或流体滚动条，但具有不可见且未设置样式的滚动条。

​

.frame {
    overflow-y: auto;
    border: 1px solid black;
    height: 13em;
    width: 10em;
    line-height: 1em;
    -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 11px;
}

::-webkit-scrollbar:horizontal {
    height: 11px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

​

或者使用-webkit-overflow-scrolling: touch;，之后不使用任何伪类。