How to emulate touchscreen style scrolling?

Question

I want to try to emulate the touch scroll gestures found on touchscreen devices for PC/Mac. However, I don't want to disable the scrollwheel. I would like to hide the scrollbar though.

Does anyone know any demos/code out there that attempts to do this?

Related question: http://stackoverflow.com/questions/2858333/is-there-an-easy-way-to-do-click-and-drag-scrolling-in-text-frames — M.Babcock, Jan 06 '12 at 21:18
http://stackoverflow.com/questions/2962082/ipad-iphone-like-scrolling — Matt Ball, Jan 06 '12 at 21:19

score 0 · Answer 1 · answered Feb 23 '21 at 14:47

0

In Webkit-based browsers (e.g., Chrome), you can use ::-webkit-scrollbar:

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

In Firefox, you can use scrollbar-width:

* {
  scrollbar-width: none;
}

answered Feb 23 '21 at 14:47

Abdull

26,371
26
130
172

Ry- · Accepted Answer · 2012-01-06T21:23:28.643

0

On certain browsers¹, hiding the main scrollbar is impossible. However, the general method is this:

html {
    overflow: hidden;
}

Demo, and here's a demo with the scrollwheel handled.

¹ i.e. IE8 and lower.

http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel

edited Jan 06 '12 at 21:23

answered Jan 06 '12 at 21:18

Ry-

218,210
55
464
476

This will disable the scroll-wheel functionality as well. – evasilchenko Jan 06 '12 at 21:19
right, I am just pointing out that your answer is not complete. :) – evasilchenko Jan 06 '12 at 21:20
@DeviantSeev: Does for me, which version? Anyway, just an example. – Ry- Jan 06 '12 at 23:29
Demo with scroll wheel did not work for me with latest version of Chrome. – evasilchenko Jan 06 '12 at 23:39
@DeviantSeev: Which latest version? Mainstream, beta, dev, or nightly? – Ry- Jan 06 '12 at 23:39

How to emulate touchscreen style scrolling?

2 Answers2