Single finger scroll for Webpage - what technology? working example?


I have a website that is hosted locally on a Desktop Computer, I have a touchscreen hooked up to that Desktop. The website is viewed on the touchscreen using Firefox.


  • Enable one-finger scrolling for my website from the touchscreen.
  • It should behave exactly the way iPhone's one-finger scroll currently works.
  • It only needs to work in Firefox.


  • What is the best technology to use in this case? (JQuery/Javascript/CSS?)
  • Can you provide a working example/solution for me?

Thanks very much.



For iOS-style scrolling on touch-aware devices (works great on desktop, too) iScroll is a great solution.

Point the touch-device in question to this demo url :

Features Include:

  • Pinch / Zoom
  • Pull up/down to refresh
  • Improved speed and momentum
  • Snap to element
  • Customizable scrollbars

-Via the iScroll 4 docs


Ill let you work out the nuances, but something like this gives you an idea


    var dragYStart;
    var dragScrollStart;

function startDrag(e){
    dragYStart = e.pageY;
    dragScrollStart = $(window).scrollTop();
function stopDrag(e){
function drag(e){
    var delta = dragYStart - e.pageY;
    $(window).scrollTop(dragScrollStart + delta);


see example


UPDATE... found this this morning. this is probably exactly what you want


use "mine" js plugin I also have swipe event handler :D

It doesn't work on handheld device, but work great on desktop, it's also very simple

I made it :D


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.