始终在Webkit浏览器(特别是Safari和iOS设备)中显示水平滚动条

Question

我在堆栈溢出上的第一个问题。我已经谷歌搜索了很多找到这个答案，但似乎没有什么可用。我想要在iOS设备上堆栈的水平滚动栏。问题是，当我使用-webkit-overflow-scrolling：touch时；滚动条仅在滚动时出现。其他技术有效，但是它们不允许堆栈滚动顺利进行，我无法握住滚动条并移动堆栈。任何帮助将不胜感激:)

我尝试了所有方案，并尝试了下面提到的CSS的所有组合。

    ::-webkit - scrollbar {
        display: block;
        height: 15 px;
    }
    .wrapper {
        padding - left: 92.5 px;
        padding - right: 92.5 px;
        padding - left: 0!important;
        display: -webkit - box;
        display: -ms - flexbox;
        display: flex;
        - webkit - overflow - scrolling: touch;
    }
    .owl - stage - outer {
        overflow: scroll;
        - webkit - overflow - scrolling: touch;
    }
    ::-webkit - scrollbar - track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
    ::-webkit - scrollbar - thumb {
        -webkit - border - radius: 10 px;
        border - radius: 10 px;
        background: rgba(0, 0, 0, .3);
        - webkit - box - shadow: inset 0 0 6 px rgba(0, 0, 0, 0.5);
    }
    <div class="owl-stage-outer">
        <div class="wrapper">
            <div>example</div>
            <div>example</div>
            <div>example</div>
            //all stacks in here
        </div>
    </div>

Answer 1

答案是：

使用溢出-x：scroll; (仅因为最终结果不是您想要的，这并不意味着它不起作用(或从刮擦(DIV获取滚动的更新 - 明显不建议用于性能问题。(