Vanilla JS Custom Scrolling Example

Features:

Example text: Scroll my list of games! Swipe this area ↓

  • Tower Swap
    • A fun and addicting game. 1,000,000+ plays!
    • Combines 2 genres: Tower Defense, and Match-3 Puzzle.
    • Play on computer, and phones/tablets.
    • No signup required. Loads fast. No forced ads.
  • Emoji Hunt
    • Find the animal emoji before time runs out!
    • Rougelike upgrade system.
    • 100 levels.
    • Play on desktop or mobile right in your browser.
  • Wording.fun
    • Find as many words as you can before time runs out.
    • Swipe to connect letters.
    • Includes definitions of every word.
    • Challenge friends to beat high scores.
  • Haiku Fangirl
    • Made for a 1 week game competition.
    • Game must have only one 128x128 texture, and load no other graphics.
    • Gameboy style frame coded in CSS. No images or SVGs.
    • Play on desktop or mobile.
    • I coded it and managed a team of 5.
    • Won 2nd place in the competition!
More games are in development!
Why not just use a div with overflow: scroll and -webkit-overflow-scrolling: touch?
  • These are not supported well, and still buggy even on the latest iPhones. For example if you keep scrolling up/down quickly in a div, acceleration will randomly stop working.
  • If you want to simulate iPhone behavior on desktop browsers.
  • If you want to alter this to create custom scroll behavior that's the same on all devices.
  • If you don't want to use DOM at all for display, you'd need to have custom code similar to this in your canvas app.

Full JavaScript code on this page: