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

Setup:

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.

Requirements:

  • 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.

Questions:

  • 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.

Answers:

Answer

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 : http://lab.cubiq.org/iscroll/examples/simple/

Features Include:

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

-Via the iScroll 4 docs

Answer

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

$(function(){

    var dragYStart;
    var dragScrollStart;
    $(window).one('mousedown',startDrag);

function startDrag(e){
    dragYStart = e.pageY;
    dragScrollStart = $(window).scrollTop();
    $(window).on('mousemove',drag);
    $(window).one('mouseup',stopDrag);
}
function stopDrag(e){
    $(window).off('mousemove',drag);
    $(window).one('mousedown',startDrag);
}
function drag(e){
    var delta = dragYStart - e.pageY;
    $(window).scrollTop(dragScrollStart + delta);
}

});

see example

Answer

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

http://zynga.github.com/scroller/

Answer

use "mine" js plugin I also have swipe event handler :D http://hoangminhdat.com/myLab/dragScrollJS/

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

I made it :D

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.