#canyouscroll – or: How to keep the internets busy

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.

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 #Firefox 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.