带有“webkit-overflow-scrolling：touch”的可见滚动条IOS答案

【问题标题】：visible scrollbars IOS with "webkit-overflow-scrolling: touch"带有“webkit-overflow-scrolling：touch”的可见滚动条IOS
【发布时间】：2014-10-07 07:11:54
【问题描述】：

我希望滚动条在 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);
}

【问题讨论】：

您找到解决方案了吗？我仍然找不到解决方法
有人有解决办法吗？

标签： ios webkit scroll

【解决方案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;，之后不使用任何伪类。

【讨论】：