带有"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);
}

或者使用 the-webkit-overflow-scrolling: touch;和后面的任何伪类。