css - 没有滚动指示器的触摸滚动。可能的？

Question

我担心这个问题的简短答案是否定的。

但在我接受这个命运之前，我会尝试做最后的努力。

除了可用性问题，有什么方法可以为 webkit 移动设备进行 div 溢出，在滚动时，我看不到滚动指示器？

我真的希望避免在纯 JS 中构建自定义滚动条，因为苹果坚持强制指示器始终可见。

任何指针都非常感谢。我环顾四周，但没有发现任何有用的东西。

提醒：我不是在问滚动条定制！！！我在询问 touchmove 期间显示的指示器。

Answer 1

我认为您可以使用此代码。但这仅适用于 Chrome 和 Safari。

#element::-webkit-scrollbar { display: none; }

Answer 2

Keeping with my tradition of answering my own question after extended research, the indicator can be hidden only by removing -webkit-overflow-scrolling:true CSS attribute.

This, unfortunately, also removes the spiffy scroll-elasticity feature, which is of course whey one would want to use the above CSS.

Answer 3

从技术上讲，您可以使用以下 CSS 在 Chrome 和 Safari 中执行此操作：

body::-webkit-scrollbar { display: none; }

但是，对于所有其他浏览器，您将需要 Javascript。基本算法如下：

HTML

<div id="container">
    <div id="content">Hello, here's lots of text...</div>
</div>

CSS

#container {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

#content {
    position: absolute;
    left: 0px;
    top: 0px;
}

JAVASCRIPT（伪代码）

When clicking on #content, check for drag
If dragging then measure amount and invert amount
Set that amount to top position of #content