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

Question

我关于 Stack Overflow 的第一个问题。我在谷歌上搜索了很多以找到这个答案，但似乎没有任何效果。我想要一个水平滚动条用于 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

答案是:

使用 overflow-x:scroll;(只是因为最终结果不是您想要的并不意味着它不起作用)或构建您自己的 scratch(一个在滚动时获取更新的 div——显然不推荐用于性能问题。)