touch scrolling without scroll indicator. Possible?

Question

I'm worried that the short answer to this question is NO.

But before I accept this fate I'll attempt a last ditch effort.

Usability concerns aside, is there any way I can do a div overflow for webkit mobile where, when scrolling, I do NOT see the scroll indicator?

I'm really hoping to avoid building a custom scroller in plain JS just because apple insisted on forcing the indicator to always be visible.

Any pointers much appreciated. I've looked around a lot but found nothing useful.

Reminder: I'm not asking about scroll bar customization!!! I'm asking about the indicator that shows during touchmove.

score 0 · Answer 1 · answered Apr 15 '13 at 22:40

0

I think you can use this code. But this will only work in Chrome and Safari.

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

answered Apr 15 '13 at 22:40

Scherdin

31
1

sigh. why do people not read a question before answering... -1 – tim Apr 15 '13 at 23:44

score -1 · Answer 2 · answered Apr 15 '13 at 23:08

-1

Technically you could do this in Chrome and Safari using the following CSS:

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

However, for all other browsers you'll need Javascript. The basic algorithm would be as follows:

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 (pseudo-code)

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

answered Apr 15 '13 at 23:08

cereallarceny

4,913
4
39
74

-1 for not reading the question. i'm NOT(!) asking about the scrollbar. – tim Apr 15 '13 at 23:43
Well then, there's no way to do what you're talking about. If you come here to StackOverflow for help, try not to be so rude. You downvoted two well-meaning people who genuinely tried to help you. Try addressing the issue next time rather than passive-aggressively flaming the community of eager **volunteers** that write your code for you. – cereallarceny Apr 15 '13 at 23:56

score -1 · Answer 3 · answered Apr 16 '13 at 00:25

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.

touch scrolling without scroll indicator. Possible?

3 Answers3