Question

我希望滚动条在IOS中始终可见。快速解决方案是＆＃34; :: - webkit-scrollbar＆＃34;固定。但是当使用＆＃34; webkit-overflow-scrolling时：触摸＆＃34;对于＆＃34;滑动感觉＆＃34;，滚动条不再可见。

我怎样才能让他们都工作？

请参阅示例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;，之后不使用任何伪类。

可见滚动条IOS带＆＃34; webkit-overflow-scrolling：touch＆＃34;

1 个答案: