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.

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.

• javascript
• jquery
• css
• web
• scroll

Share Improve this question Follow asked Mar 19, 2013 at 22:38 CODeCODe 2,30166 gold badges3636 silver badges6666 bronze badges 17

• I'm pretty sure that touch scrolling is something that is implemented at the driver level, NOT content level. – LucienK Commented Mar 19, 2013 at 22:40
• Touch scrolling is basically the equivalent of doing the same single-finger touch scroll motion with your mouse, I believe... therefore shouldn't this be doable with something like capturing mouse events, aka normal web technology stuff? – CODe Commented Mar 19, 2013 at 22:44
• How are you currently scrolling through webpages on the touchscreen in question? – couzzi Commented Mar 19, 2013 at 22:48
• 1 As a quick test of whether or not touch events work (my money is on yes), navigate to this iScroll demo page on your device. More on iScroll 4 here. – couzzi Commented Mar 19, 2013 at 23:11
• 1 @Code - fair enough, agreee to disagree. So anyway, who makes the device in question? – Stephen Byrne Commented Mar 19, 2013 at 23:36

 |  Show 12 more ments

4 Answers 4

Sorted by: Reset to default 3

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

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

http://zynga.github./scroller/

The 'iScoll' library is archived. For posterity see:

https://github./cubiq/iscroll [archived/read-only] https://web.archive/web/20170515081250/http://iscrolljs./ https://web.archive/web/20180726185738/http://lab.cubiq/iscroll/examples/simple/

As of 18/5/2021 all links below 404.

---

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/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

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

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

I made it :D