Christian Heilmann

#canyouscroll – or: How to keep the internets busy

Wednesday, August 8th, 2012 at 1:35 pm

Reviewing my upcoming article on events for Smashing Magazine for the umpteenth time I came across a short code example I ended up not using but being fun all the same. Can you scroll? is a very simple small game that asks you to predict the amount of pixels you will scroll and then tells you by how many you are off. You can then share your success or failure on Twitter.

Can you scroll?

Much like Time yourself released earlier, this game works with some very simple event handlers and a few lines of code. The source of can you scroll and source of time yourself are on GitHub for you to play with.

The functionality is simple – when you submit the form I hide it and when you click the document I read the scrollTop of the current document and compare it with the value you entered. The only snag I ran into was that Chrome/Safari and Firefox/Opera read different properties, so you need to check for both with end = document.body.scrollTop || document.documentElement.scrollTop.

My favourite about these things is though how people start gaming the game and find solutions to get good results:

Stefan Asemota uses the keyboard:

Cheatsheet: Chrome, keyboard arrow-down once = 40px | Firefox: keyboard arrow-down once = 48px #canyouscroll :)

I use JavaScript:

#canyouscroll for cheaters: window.scrollTo(0,document.querySelector(‘#amount’).value);document.body.click();

Michaël Duerinckx counts mouse notches:

@codepo8 Or count the notches on your scroll wheel and try again with the correct number ;) Neat little game!

Mehdi Kabab matched notches to pixels:

.@codepo8 or use that scrolls by steps of 16px :D — http://bit.ly/NCUJFa

I am sure more people will find clever ways to cheat. I love that about web games.

Share on Mastodon (needs instance)

Share on BlueSky

Newsletter

Check out the Dev Digest Newsletter I write every week for WeAreDevelopers. Latest issues:

160: Graphs and RAGs explained and VS Code extension hacks Graphs and RAG explained, how AI is reshaping UI and work, how to efficiently use Cursor, VS Code extensions security issues.
159: AI pipelines, 10x faster TypeScript, How to interview How to use LLMs to help you write code and how much electricity does that use? Is your API secure? 10x faster TypeScript thanks to Go!
158: 🕹️ Super Mario AI 🔑 API keys in LLMs 🤙🏾 Vibe Coding Why is AI playing Super Mario? How is hallucinating the least of our worries and what are rules for developing Safety Critical Code?
157: CUDA in Python, Gemini Code Assist and back-dooring LLMs We met with a CUDA expert from NVIDIA about the future of hardware, we look at how AI fails and how to play pong on 140 browser tabs.
156: Enterprise dead, all about Bluesky and React moves on! Learn about Bluesky as a platform, how to build a React App and how to speed up SQL. And play an impossible game in the browser.

My other work: